I'm following this SO Answer to vertically align a div's contents that has float: left styling:
.main {
height: 85px;
}
.child_1,
.child_2 {
float: left;
width: 8rem;
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
But, it doesn't vertically align as per the height of the wrapper div main. What is wrong in the code?
If you add
display: flex;
align-items: center;
to .main class, it should work.
.main {
height: 85px;
background-color: #f00;
/*position: absolute;*/
/*top: 2rem;*/
display: flex;
align-items: center;
}
.child_1,
.child_2 {
float: left;
width: 8rem;
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
In the linked question, you can see that the line box aligns itself, but not exactly with the main - try setting a height for the main and you'll see.
You've height set for the main here and that makes all the difference. For this you can use a psuedo element to center:
.main:after{
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
See demo below:
.main {
height: 85px;
border: 1px solid;
}
.child_1,
.child_2 {
float: left;
}
.main:after{
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
Related
Why is there a line break between the middle and last floated h1 tags?
.div {
border-style: solid;
display: inline-table;
border-color: #91b8f7;
vertical-align: top;
}
<div class="div" style="height: 200px; width: 55%">
<div>
<h1 style="display: inline-block; float: left;">1</h1>
<h1 style="display: inline-block; float: right; padding-right: 60%">2</h1>
<h1 style="display: inline-block; float: right; padding-right: 10%;">3</h1>
</div>
</div>
<div class="div" style="height: 200px; width: 30%">
<p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
<p>dsfdsfdsfsfds</p>
</div>
There are two main issues with your code:
1- You need to add "box-sizing: border-box" to the CSS for the .div class. Without this, by default, your browser adds the width of the border to the width of your divs, so they are slightly more than the percentages you are telling them to be. Border-box makes the browser include the border in the width you set.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
2- You can't have any white space between your divs, or that tiny space will push your third div into the next line. I eliminated the spaces between the close of one and the start of another . You can choose flex or grid display if you don't want to have to do this.
.div {
box-sizing: border-box;
border-style: solid;
display: inline-table;
border-color: #91b8f7;
vertical-align: top;
}
<div class="div" style="height: 200px; width: 55%">
<div>
<h1 style="display: inline-block; float: left;">1</h1>
<h1 style="display: inline-block; float: right; padding-right: 60%">2</h1>
<h1 style="display: inline-block; float: right; padding-right: 10%;">3</h1>
</div>
</div><div class="div" style="height: 200px; width: 30%">
<p>dsfdsfdsfsfds</p>
</div><div class="div" style="height: 200px; width: 15%">
<p>dsfdsfdsfsfds</p>
</div>
I want to center vertically text, when the elements height is unknown?
html
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
css
/* CSS used here will be applied after bootstrap.css */
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
Elements "Ex1, Ex2" count is unknown, so, if there are more of those, obviously, the table row will get bigger in height. I need some solution, that would be responsive to this also...
https://www.codeply.com/go/bp/4ZEUS7Q7lm
Just add row-ht-eq class to row <div class="second-row">
CSS:
.row-ht-eq {
display: flex;
align-items: center;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
Also you can play with:
display: table-cell;
vertical-align: middle;
Note: Use span Element as helper.
Html:
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
Css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Full Code:
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
Change your text class to:
.left-col-text {
margin:0 auto;
}
This will automatically decide equal distance from top to bottom.
<div class="list">
<div class="gif"><img></div>
<div class="info">
<div><span class="text">I am good</span></div>
</div>
</div>
.info {padding:7px 0 0 38px}
.text {word-wrap: break-word}
As wee can see, I added padding-top:7px to keep the texts center, if there is more words the texts go down a bit (image B).
What is (A solutions).
Try below code for vertical-align middle of any text.
.section {
display: table;
height: inherit;
min-height: 100%;
width: 100%;
}
.list {
display: table-row;
height: 100%;
width: 100%;
}
.gif, .info {
display: table-cell;
vertical-align: middle;
height: 100%;
}
.gif {
width: 15%;
}
.gif img {
height: 100%;
}
.info {padding:0 0 0 38px}
.text {word-wrap: break-word}
<div class="section">
<div class="list">
<div class="gif"><img src="http://image.made-in-china.com/3f2j00KNTaikdRZWbV/Small-Size-Colorful-Nature-Round-Shell-Sewing-Button-with-Two-Holes.jpg"></div>
<div class="info">
<div>
<span class="text">I am good</span>
<span class="text">I am good</span>
<span class="text">I am good</span>
</div>
</div>
</div>
</div>
Am trying vertical align some text within a div to the center but I am unable to do so. I've tried using the display method to be table and table cell but this doesn't seem to work. Please help.
Fiddle
HTML:
<div class="vc_row wpb_row vc_row-fluid blunetser-banner vc_custom_1415005990938">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="wpb_wrapper">
<div class="vc_row wpb_row vc_inner vc_row-fluid blunet-serv-banner-row">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Some text will go here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.blunetser-banner {
display: table;
height: 300px;
background: #eee;
}
.blunet-serv-banner-row {
display: table-cell;
vertical-align: middle;
}
This is my favorite solution for this issue (simple and very well browser supported):
html
<div class="vcenter">
<p>Text</p>
</div>
css
.vcenter{ //change this
width: 300px;
height: 300px;
}
.vcenter:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.vcenter :first-child {
display:inline-block;
vertical-align:middle;
}
Fiddle: http://jsfiddle.net/u5x7ta0w/2/
So, for your case:
.wpb_wrapper{
width: 300px;
height: 300px;
}
.wpb_wrapper:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.wpb_wrapper :first-child {
display:inline-block;
vertical-align:middle;
}
I think you used the wrong class names in your stylesheet?
http://jsfiddle.net/f72ocv0x/5/
.wpb_text_column {
display: table;
height: 300px;
background: #eee;
}
.wpb_wrapper {
display: table-cell;
vertical-align: middle;
}
Because .blunet-serv-banner-row is not the direct child of .blunetser-banne, it doesn't take up 100% height.
It should be :
.vc_column_container {
display: table-cell;
vertical-align: middle;
}
See updated fiddle here.
you have to give the div with the text in it a line-height if u give the div the line height 300px it will be in the middle
.blunetser-banner {
display: table;
height: 300px;
background: #eee;
line-height: 300px;
}
line-height needs to be the same as the height of the div
http://jsfiddle.net/f72ocv0x/6/
I faced a problem with css and html. I need to center the text in the box. When I place text, all boxes are going bottom little bit.
Here is my code
.box {
width: 100px;
height: 100px;
background: #cce;
display: inline-block;
margin-left: 10px;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Add vertical-align: top; and text-align: center; to .box like this:
.box {
width: 100px;
height: 100px;
background: #cce;
display: inline-block;
margin-left: 10px;
vertical-align: top;
text-align: center;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
To center the text vertical and horizontal and dont wanna care about the text length you can do it with the table - table-cell method like
.box {
width: 100px;
height: 100px;
background: #cce;
float: left;
margin-left: 10px;
display: table;
}
.box p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
This provides also a great browser support.
To center text in the blocks add text-align: center;
.box {
width: 100px;
height: 100px;
text-align: center;
vertical-align: top;
background: #cce;
display: inline-block;
margin-left: 10px;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>