How to split three div's: left, center, and right with the blocks aligned vertically
Faced with the following problem: having centered the blocks vertically, I tried to spread them to the left/center/right. When trying to do this via
float: right;
Or
position: absolute;
right: 0;
The vertical alignment of the inner blocks falls off, and they stick to the top of the outer block.
How to overcome this problem, without using transform?
.main {
background: grey;
height: 50px;
width: 100%;
}
.main:before {
height: 100%;
display: inline-block;
vertical-align: middle;
content: '';
}
.logo {
background: green;
display: inline-block;
white-space: normal;
vertical-align: middle;
text-align: left;
}
.menu {
background: yellow;
display: inline-block;
white-space: normal;
vertical-align: middle;
text-align: left;
}
.auth {
background: red;
display: inline-block;
white-space: normal;
vertical-align: middle;
text-align: right;
}
<div class="main">
<div class="logo">
логотип
</div>
<div class="menu">
основное меню
</div>
<div class="auth">
авторизация
</div>
</div>
1
2 answers
All the examples given in my answer will work even in arachne
Like this, on inline-block
.main {
text-align: justify;
}
.main:after {
content: '';
display: inline-block;
width: 100%;
}
.main div {
display: inline-block;
background: lightblue;
}
<div class="main">
<div class="logo">
логотип
</div>
<div class="menu">
основное меню
</div>
<div class="auth">
авторизация
</div>
</div>
On float + inline-block
* {
margin: 0;
padding: 0;
}
.clear,
.clear:after,
.clear:before {
content: "";
display: block;
clear: both;
}
.logo,
.menu,
.auth {
display: inline-block;
width: 30%;
text-align: center;
vertical-align: top;
}
.logo {
float: left;
background: yellow;
}
.auth {
float: right;
background: blue;
}
.menu {
width: 40%;
margin: auto;
background: red;
}
<div class="main">
<div class="logo">
логотип
</div>
<div class="menu">
основное меню
</div>
<div class="auth">
авторизация
</div>
<div class="clear"></div>
</div>
Table + table-cell
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
display: table;
width: 100%;
height: 50px;
text-align: center;
margin: auto;
}
.logo,
.menu,
.auth {
display: table-cell;
text-align: center;
vertical-align: middle;
border: 1px solid blue;
border-collapse: collapse;
}
.logo,
.auth {
width: 30%;
}
.menu {
width: 40%;
}
<div class="main">
<div class="logo">
логотип
</div>
<div class="menu">
основное меню
</div>
<div class="auth">
авторизация
</div>
<div class="clear"></div>
</div>
Position:absolute
The disadvantages are obvious, although this method works, but it is better not to apply
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
}
.logo,
.menu,
.auth {
position: absolute;
top: 0;
background: blue;
padding: 0 10px;
color: white;
}
.logo {
left: 0;
}
.auth {
right: 0;
}
.menu {
left: 0;
right: 0;
margin: auto;
width: 50%;
background: red;
}
<div class="main">
<div class="logo">
логотип
</div>
<div class="menu">
основное меню
</div>
<div class="auth">
авторизация
</div>
</div>
.main {text-align: justify; line-height: 0;}
.main:after {content:''; display: inline-block; width: 100%; height: 0;}
.logo, .menu, .auth {display: inline-block; vertical-align: middle;}
0
Author: Андрей, 2018-06-08 21:00:38