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; 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%);
} /* способ два */

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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