when I delete the vertical-align in div.content:before selector, the text will pull down and can't show completely, so what's the pseudo class do and why this works?
PS: Is there any other way to implement like the demo shows, namely align the text in the middle and text will begin in a new line if it is too long.
here is the demo: http://jsfiddle.net/yougen/8WhNZ/
html:
<div class="wrapper">
<div class="content">
<span>Mix Color Lace Dress</span>
</div>
</div>
css:
div.wrapper {
position: relative;
width:120px;
}
div.content {
width: 120px;
height: 80px;
text-align: center;
background: rgba(51,51,51,0.5);
}
div.content:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
div.content span {
display: inline-block;
width: 80px;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
color: white;
}
The before pseudo element is just at the left of your real content. Its function is to have a 100% of the height of the container and precisely has a vertical-align: middle to force every element on the same line (in this case, your span) with the same vertical-align: middle to be shown in the middle of the container, although it hasn't the 100% of the height.
This trick is used when you don't know the height of the element that you want to align in the middle. In other cases you can play with vertical margins, for example, but here we need a pseudoelement with a known height (100% of the container).
Look at that: http://jsfiddle.net/7hUqs/
#element-1 {
height: 50px;
background-color: blue;
vertical-align: middle;
}
#element-2 {
height: 100px;
background-color: yellow;
vertical-align: top;
}
#element-3 {
height: 70px;
background-color: green;
vertical-align: middle;
}
#element-4 {
height: 80px;
background-color: pink;
vertical-align: middle;
}
The vertical-align: middle works with the silbing elements that have the same came of vertical-align. All of them, as a block, will be aligned with the other elements of the line and its vertical alignement (in this case, top). And the height of the line is the maximum height of its elements, not the height of the container. A little weird, but this is the thing.
try this
div.content:before {
content:'';
display: inline;
height: 100%;
margin-top:10px;
margin-right: -0.25em;
}
div.content span {
display: inline;
width: 80px;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
color: white;
}
fiddle demo
Related
I searched over Stackoverflow though many posts but I didn't found the solution.
I'm trying to align my text vertically, using margin: auto;
It seems there is a margin collapsing problem, if you wanna check this example:
// HTML
<div class="outer">
<div class="inner">Hello</div>
</div>
<div class="outer2">
<div class="inner">Trying to center this text vertically</div>
</div>
// CSS
.inner {
margin: auto 0;
height: 20px;
color: white;
}
.outer {
background-color: red;
}
.outer2 {
background-color: blue;
height: 200px;
}
If you want to play on my code, click here
I don't believe there's a good way to vertically align content using margin: auto 0 like you've set it up. To get the inner divs vertically centered, here's a simple way by modifying .inner:
.inner {
height: 200px;
color: white;
line-height: 200px;
}
The display does the magic. Display: table-cell on inner and display: table on outer div. And finally on inner div you put vertical-align: middle or whatever position that you want.
.inner {
display: table-cell;
vertical-align: middle;
height: 20px;
color: white;
}
.outer2 {
text-align: center;
background-color: blue;
height: 200px;
display: table;
width: 100%;
}
I would advise you to use flexbox
add this to outer2 class
.outer2 {
background-color: blue;
height: 200px;
display:flex;
align-items:center;
}
And for horizontal align you can use justify-content:center
align-item:center will align items in center of div vertically ,
.outer2 {
display: flex;
justify-content: center, left;
background-color: blue;
height: 200px;
}
you are trying to align the entire inner div by giving margin:auto. You can use text-align: center if you want to align the text. If you need to align the entire div then mention height and width for inner div. I have posted fiddle link please check
http://jsfiddle.net/ajaycoder/n1rz0bts/4/
.inner {
margin: auto ;
color: white;
width:50%;
border: solid 1px red;
height:50%;
}
I am a rookie, I tried to make a div with 2 spans today with an img and a p element. Well, here is the relative code below, but the two spans stay at the diff vertical position.I do not know why, as they all have the same css, and the width of the wrapper is long far enough.
<div id="bannerwrapper">
<span>
<img src="mail.png">
</span>
<span>
<strong>xxxx#gmail.com</strong>
</span>
</div>
And, the css is
*{
margin: 0;
padding: 0;
line-height: 1.6;
}
#bannerwrapper{
width: 163px;
height: 21px;
margin: 10px auto;
}
#bannerwrapper span{
display: inline-block;
height: 21px;
}
#bannerwrapper span img{
width: 30px;
height: 21px;
}
At last, I gave the second span a float right css to solve this problem, surely it would.
But I am not leaving the problem, I am not just asking for solutions, I want to know why, Why the two spans did not stay at the same vertical position before?
Thanks for your time.
Under image there is a little gap, declare img as block or add vertical-align.
#bannerwrapper span img{
width: 30px;
height: 21px;
display: block;
}
OR
#bannerwrapper span img{
width: 30px;
height: 21px;
vertical-align: middle;
}
Above you have two possible solutions how to fix that. Something more why it's needed at https://stackoverflow.com/a/27177987/.
You have to add vertical-align: middle to img element:
* {
margin: 0;
padding: 0;
line-height: 1.6;
}
#bannerwrapper {
width: 163px;
height: 21px;
margin: 10px auto;
}
#bannerwrapper span {
display: inline-block;
height: 21px;
}
#bannerwrapper span img {
width: 30px;
height: 21px;
vertical-align: middle;
/*Add vertical align middle*/
}
<div id="bannerwrapper"> <span>
<img src="http://placehold.it/200x100">
</span>
<span>
<strong>xxxx#gmail.com</strong>
</span>
</div>
I strongly suggest to take a look to vertical-align property.
Why my div <div class="two"> didint align verticaly at the middle event after i put vertical-align: middle;
Here's a FIDDLE
HTML :
<div class="main">
<div class="one"></div>
<div class="two"></div>
</div>
CSS :
.main {
border: 1px solid;
display: inline-block;
}
.one {
width: 70px;
height: 70px;
background-color: antiquewhite;
display: inline-block;
}
.two {
display: inline-block;
width: 10px;
height: 10px;
background-color: cadetblue;
vertical-align: middle;
}
You need the vertical-align:middle on one, and two. That way the vertical middle of one is aligned with the vertical middle of two. You could also just put vertical-align:middle on one which will align its vertical middle position to the baseline vertical position of two.
jsFiddle example
Try this:
Add vertical-align:middle rule to .one class
.one {
width: 70px;
height: 70px;
background-color: antiquewhite;
display: inline-block;
vertical-align: middle; /* Adde Rule */
}
Fiddle
I was wrote this source code just for example, I was manual enter padding-top 90px for h2 tag for example what i want; but when remove padding text is not centered vertical. This is not problem when i know bluebox div height but some times this is 200px, some times 900px.
.bluebox
{
width: 400px;
background-color: blue;
height: 200px;
}
.bluebox h2
{
font-family: Arial;
font-size: 10pt;
text-align: center;
padding-top: 90px;
}
<div class="bluebox"><h2>Hi i am a text, now I am only horizontal centered<h2></div>
Demo: http://jsfiddle.net/5UJWa/
.bluebox {
width: 400px;
background-color: blue;
height: 200px;
position: relative; /* allow absolute positioning within */
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
position: absolute; /* positioning */
top: 50%; /* 50% from the top (half way) */
margin-top: -5pt; /* bring it back up half the height of your text size */
width: 100%; /* to allow for the text align */
}
Example at http://jsfiddle.net/zTPgh/1/ - Change the height of the container and run or update to see it in action.
You can play with display: table-cell;.
Your new CSS:
.bluebox {
width: 400px;
background-color: blue;
height: 150px;
display: table-cell;
vertical-align: middle;
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
}
Check out the illustration on jsFiddle.
See my tutorial here which will vertically align and center text and images. DON'T rely on line-heights as you'll have huge gaps between lines of text. http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html
I have Create one demo for vertical image center and text also i have test on firefox ,chrome,safari, internet explorer 9 and 8 too.
It is very short and easy css and html, Please check below code and you can find output on screenshort.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
For aligning an element vertically center, I have used css3 calc() function. It's perfectly working in all the latest browsers including ie11 and edge.
Check it live here https://jsfiddle.net/ashish_m/ebLxsxhk/
.calcTest { width: 250px; height: 250px; border:1px solid #e0e0e0; text-align: center; }
.calcTest .calcTestInner { width: 50px; height: 50px; background: #e0e0e0;
margin: 0 auto; margin-top: calc(50% - 25px); vertical-align: top; }
<div class="calcTest">
<div class="calcTestInner">
Hello Folks
</div>
</div>
I made box and I set line-height, the text is automatically vertically center. Is there a way or any kind of trick to set the text on the bottom of the box?
div {
width: 100px;
height: 100px;
background: #eee;
color: #333;
text-align: center;
line-height: 100px;
vertical-align: text-bottom;
}
<div>FoxRox</div>
2020 Update
You can use CSS grid, flexbox or the original method with line-height:
body { display: flex } /* just to prettify */
div {
margin: .5em;
width: 6.25em; height: 6.25em;
background: #eee;
color: #333;
text-align: center
}
.grid {
display: grid;
align-content: end;
}
.flex {
display: flex;
align-items: flex-end;
justify-content: center
}
.lh { line-height: 11.5 /* 6.25*2 - 1.5 */ }
<div class='grid'>Hello</div>
<div class='flex'>Hello</div>
<div class='lh'>Hello</div>
Setting the height of the div and the line-height of the text to the same value, 100px in your case, is a method of vertically centering the text within the div. That's the problem.
The solution is to change line-height to twice the height minus the size of the text and remove useless vertical-align.
Enclose the text in a p tag with display:inline-block. Set vertical-align to the p element.
<div>
<p>FoxRox</p>
</div>
div {
width: 100px;
height: 100px;
background: #eee;
color: #333;
text-align: center;
}
p {
display: inline-block;
vertical-align: -80px;
}
Demo
You could set display to table-cell, try this CSS for example.
width: 100px;
height: 100px;
display: table-cell;
vertical-align: bottom;
Demo: http://jsfiddle.net/Kawwr/
You could check out my answer to https://stackoverflow.com/a/6116514/682480.
Here is the demo for the above answer.
The trick is to use display: table-cell on the outer container. That way you can use the vertical-align: bottom and display: inline-block; on the div.