1

Привет.

Как выровнять по высоте (middle) таблицу внутри блока?

Вот код:

<html>
	<head>

		<style>
			*{
				margin:0px;
				padding:0px;
			}
			
			#div4{
				background-color:red;
				height:300px;
			}
			
			#table1{
				display:inline-block;
				vertical-align:middle;
			}
		</style>
	</head>
	<body>	
		<div id="div4">
			<table id="table1">
				<tr>
					<td id="td1"><img id="girl" src="images/girl.jpg"/></td>
				</tr>
			</table>
		</div>
	</body>
</html> 

Почему назначение таблице display:inline-block; vertical-align:middle; не срабатывает? С картинками и другими строчными элементами это работает.

2 ответа 2

3

Потому что display:inline-block; vertical-align:middle; выравниваются относительно друг друга. Т.е. если бы был еще один элемент с такими свойствами рядом с таблицей, то она бы выровнялась.

Можно воспользоваться псевдоэлементом :before (и только им) для обертки #div4.

#div4:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

*{
  margin:0px;
  padding:0px;
}

#div4{
  background-color:red;
  height:300px;
  text-align: center;
}

#div4:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

#table1{
  display:inline-block;
  vertical-align:middle;
}
<div id="div4">
  <table id="table1">
    <tr>
      <td id="td1"><img id="girl" src="images/girl.jpg"/></td>
    </tr>
  </table>
</div>

3
  • спасибо за ответ. я с таким не сталкивался. можешь статью скинуть, где про это пишут?
    – Dimon
    2 сен 2016 в 8:07
  • Что значит "Можно воспользоваться псевдоэлементом :before для обертки #div4"? насколько я понимаю, этот псевдо элемент ставится ПЕРЕД #div4 и не содержит (не оборачивает) в себе #div4.
    – Dimon
    2 сен 2016 в 12:29
  • Я имела ввиду #div4:before эту запись
    – SVE
    2 сен 2016 в 12:52
1

я обычно использую обертку.

css:

.block{
    width:100px;
    height:120px;
    background:black;
}

.wrap{
    width:100px;
    height:120px;
    display:table-cell;
    vertical-align:middle;
}

.any_in_td{
    width:50px;
    height:100px;
    background:red;
}

table{
    margin:auto;
}

html:

<div class="block">
    <div class="wrap">
        <table>
            <tr>
                <td><div class="any_in_td"></div></td>
            </tr>
        </table>
    </div>
</div>
2

Ваш ответ

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

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