Выравнивание по центру

@LogiFlo · Регистрация: 29.06.2019

Author24 — интернет-сервис помощи студентам

Здравствуйте, создал 2 кнопки css и не могу все сделать, так чтобы они были по центру страницы. Помогите переместить кнопки на центр.

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DecHost</title>
<style type="text/css">
a.wsbutton{
    background: #3DB0F1;/*цвет фона*/
    border-radius: 3px;/*радиус скругления*/
    box-shadow: 0 -3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*внутрення тень*/
    color: #ffffff;/*цвет текста*/
    font-family: sans-serif;/*семейство шрифта*/
    font-size: 14px;/*размер текста*/
    font-weight: bold;/*жирный шрифт*/
    line-height: 1.5;/*высота строки*/
    padding: 10px 25px;/*внутрение отступы*/
    text-decoration: none;/*убераем подчеркивание*/
    transition: all 0.3s;/*плавный эффект перехода*/   
}
a.wsbutton:hover {
    background: #EB0563;/*другой цвет фона*/
    box-shadow: 0 3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*расположение тени сверху*/
}
a.glavnaya{
    background: #3DB0F1;/*цвет фона*/
    border-radius: 3px;/*радиус скругления*/
    box-shadow: 0 -3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*внутрення тень*/
    color: #ffffff;/*цвет текста*/
    font-family: sans-serif;/*семейство шрифта*/
    font-size: 14px;/*размер текста*/
    font-weight: bold;/*жирный шрифт*/
    line-height: 1.5;/*высота строки*/
    padding: 10px 25px;/*внутрение отступы*/
    text-decoration: none;/*убераем подчеркивание*/
    transition: all 0.3s;/*плавный эффект перехода*/
}
a.glavnaya:hover {
    background: #EB0563;/*другой цвет фона*/
    box-shadow: 0 3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*расположение тени сверху*/
}
</style>
</head>
<body>
    <h1 class="colored" align="center"><font face="Arial">Тест2</font></h1>
    <a href="#" class="wsbutton">Тарифы<a/>   <a href="#" class="glavnaya">Главная<a/>
</body>
</html>

@Academik · 29.06.2019, 14:10

Сообщение от LogiFlo

<a/>

Правильно так </a>

А чтоб выровнять кнопки, оберните в див и задайте через стили центровку.

HTML5

<div class="btns">
    <a href="#" class="wsbutton">Тарифы</a>
    <a href="#" class="glavnaya">Главная</a>
</div>

CSS

1
2
3

.btns{
  text-align: center;
}

Добавлено через 3 минуты
Не советую каждой кнопке прописывать одинаковые стили, достаточно один раз прописать общие стили для ссылок в блоке .btns

CSS

.btns a{
    background: #3DB0F1;/*цвет фона*/
    border-radius: 3px;/*радиус скругления*/
    box-shadow: 0 -3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*внутрення тень*/
    color: #ffffff;/*цвет текста*/
    font-family: sans-serif;/*семейство шрифта*/
    font-size: 14px;/*размер текста*/
    font-weight: bold;/*жирный шрифт*/
    line-height: 1.5;/*высота строки*/
    padding: 10px 25px;/*внутрение отступы*/
    text-decoration: none;/*убераем подчеркивание*/
    transition: all 0.3s;/*плавный эффект перехода*/   
}
.btns a:hover {
    background: #EB0563;/*другой цвет фона*/
    box-shadow: 0 3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*расположение тени сверху*/
}

@LogiFlo · 29.06.2019, 14:54 **[ТС]**

Вообщем, решил по вашему способу сделаать и кнопки перенеслись, а .block1 который я создал все равно в левой стороне, а не по центру!

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DecHost</title>

CSS

<style type="text/css">
body 
 { 
    background: url(bg.jpg);
 }
.my_buttom {
  margin: 30px;
  text-align: center;
}
 
.button {
  font-weight: bold;
  background: white;
  text-decoration: none;
  font-size: 30px;
  font-family: Arial;
  border-color: blue;
  padding: 5px 10px;
  color: blue;
  box-sizing: border-box;
  border-radius: 10 px;
  border: 1px solid blue;
  border-top-color: blue;
  border-bottom: 3px solid blue;
  opacity: 0.5;
}
 
.button:hover {
  background-color: #0848BD;
  color: #FFFFFF;
}
.colored {
    color: blue;
    font-size: 60px;
    background: white;
    font-weight: bold;
    text-decoration: none;
    border-color: blue;
    padding: 1px 1px;
    box-sizing: border-box;
    border-radius: 1 px;
    border: 1px solid blue;
    border-top-color: blue;
    border-bottom: 2px solid blue;
    opacity: 0.5;
}
.block1 { 
    width: 600px; 
    height: 600px;
    background: #FFFFFF;
    opacity: 0.5;
    padding: 5px;
    padding-right: 5px; 
    border: solid 1px blue; 
   }
.brr {
    text-align: center;
}
</style>

HTML5

</head>
<body>
    <h1 class="colored" align="center"><font face="Arial">DecHost</font></h1>
    <div id="menu">
    <nav class="my_buttom" id="button">
    <a class="button" href="#" id="indexnav">Главная</a>
    <a class="button" href="#" id="aboutnav">О нас</a>
    <a class="button" href="#" id="contactnav">Контакты</a>
    <a class="button" href="#" id="portfolionav">Тарифы</a>
  </nav>
</div>
<div class="block1" class="brr">
    
</div>
</body>
</html>

@Academik · 29.06.2019, 15:20

LogiFlo, сформулируйте задачу более конкретно. Если есть скриншоты, приложите их.

@LogiFlo · 29.06.2019, 15:28 **[ТС]**

https://imgur . com /a/NKfxTaC
Вот мне нужно чтобы этот див был на середине страницы!

@Academik · 29.06.2019, 15:36

LogiFlo,

CSS

.block1 { 
    width: 600px;
    margin: 0 auto;
}

Добавлено через 2 минуты
Как правило при верстке сайта первым делом делают контейнер-обертку, которого центруют.

HTML5

1
2
3

<div class="container">
  // Все остальное
</div>

CSS

.container{
  max-width: 1200px;
  margin: 0 auto;
}

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	29.06.2019, 15:20	4
	LogiFlo, сформулируйте задачу более конкретно. Если есть скриншоты, приложите их. 0

@LogiFlo 0 / 0 / 0 Регистрация: 29.06.2019 Сообщений: 3
	29.06.2019, 15:28 [ТС]	5
	https://imgur . com /a/NKfxTaC Вот мне нужно чтобы этот див был на середине страницы! 0

	29.06.2019, 15:36

Выравнивание по центру

Решение