0

Я пытаюсь горизонтально расположить 3 кнопки и одну ссылку,которая будет выглядеть как кнопка. Получилось все,кроме расположения текста по центру div'a. Я пробовал использовать margin,но безрезультатно. Подскажите,что нужно сделать что бы текст был по центру?

body{background-color:#ece4e4;}
a{text-decoration:none;
color:black;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:175%;
}
input.buttons{border-radius: 12px;
background-color:white;
height:38px;
width:24%;
border-width:1px;
border-color:solid black;
}
#buttons_form{width:50%;
 height:40px;
}
.c{border: 0.5px solid gray;
	border-top-color: white;
	border-left-color: white;
height: 36px;
vertical-align: bottom;

text-align: center;
width: 24%;
display: inline-block;
border-radius:12px;
background-color:#fafafa;
}
#button_link{font-size: 100%;}
<!DOCTYPE html>
<head>
	<meta name="keywords" content="разные, ключевые, слова,it2.0">
	<meta charset="utf-8">
  </head>

<body>
<form id="buttons_form">
		<input class="buttons" type="submit" value="Сохранить">
		<input class="buttons"type="submit" value="Сохранить и добавить">
		<input class="buttons" type="submit" value="Сохранить и закрыть">
		<div class="c"> <a  id="button_link" href="settings.html">Закрыть</a> </div>
	</form>
  </body>

1
  • 2
    если я правильно понял, вы хотите вертикально выравнять текст??? если да, вам нужно для #button_link указать line-height, равный высоте родителя, т.е. 36px; Commented 4 окт. 2019 в 13:23

2 ответа 2

0

Самый тупой вариант (при том, что высота кнопки уже прописана) это довавить для .c:

line-height: 36px;

Либо можно использовать нормальные методы вертикального центрирования, например добавления псевдоэлемента или использование flex.

0
body{background-color:#ece4e4;}
a{text-decoration:none;
color:black;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:175%;
}
input.buttons{border-radius: 12px;
background-color:white;
height:38px;
width:24%;
border-width:1px;
border-color:solid black;
}
#buttons_form{width:50%;
 height:40px;
}
.c{border: 0.5px solid gray;
    border-top-color: white;
    border-left-color: white;
height: 36px;
vertical-align: bottom;
position: relative;
text-align: center;
width: 24%;
display: inline-block;
border-radius:12px;
background-color:#fafafa;
}
/* #button_link{
  display: inline-block;
  font-size: 100%;
  line-height: 36px;
  vertical-align: middle;
}
способ раз */  

#button_link{
  position: absolute;
  font-size: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
} /* способ два */

Почитайте статью про вертикальное горизонтальное выравнивание,очень доступно все расписано.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.