I'm trying to align vertically a text block. I have a :before pseudo-element and what I'd like to achieve is having both aligned to the middle.
Is it possible to achieve it without extra wrapper? Here's what my problem looks like:
HTML:
<div class="fail">Something's wrong</div>
<div class="success">
<span>Perfect middle</span>
</div>
CSS fail:
.fail
{
background: orange;
font-size: 30px;
display: inline-block;
}
.fail:before
{
background: red;
content: '✗';
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}
CSS success:
.success
{
font-size: 30px;
background: lime;
display: inline-block;
}
.success:before
{
background: green;
content: '✓';
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}
.success span {
vertical-align: middle;
}
It might be not so obvious from this picture, but the left one is too high, about 2-3 pixels of difference. It matters especially for smaller elements.
So my question is: can I achieve perfect middle with just one HTML tag + :before?
Because I dont like inline elements that much, I would do it like this:
.fail {
position: relative;
float:left;
padding-right: 10px;
line-height: 60px;
font-size: 30px;
background: orange;
}
.fail:before {
content: '✗';
display: inline-block;
width: 60px;
margin-right: 10px;
text-align: center;
background: red;
}
Related
I have a button with a span icon inside it. I want the icon to be a bit more vertical centered from the text inside the button, but the span is taking the whole height of the button. This way the text also moves when I put margin-top with the text.
https://jsfiddle.net/DTcHh/26184/
I've put the background-color:red; to show my problem.
I don't think that giving it a standard hight is a clean fix for it.
button {
height: 50px;
display: inline-block;
margin: 0;
padding: 0px 40px;
position: relative;
z-index: 1;
}
span.glyphicon-envelope {
padding-left: 20px;
background-color: red;
display: inline-block;
line-height: 50px;
font-size: 18px;
;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button>
Send
<span class="glyphicon-envelope"></span>
</button>
Try removing the line-height: 50px;. Also your jsfiddle points to something else it seems?
span.glyphicon-envelope {
padding-left: 20px;
background-color: red;
display: inline-block;
font-size: 18px;
position: relative;
top: 2px;
}
Reduce the line-height and remove padding in span.glyphicon-envelope
button {
height: 50px;
display: inline-block;
margin: 0;
padding: 0px 40px;
position: relative;
z-index: 1;
}
span.glyphicon-envelope {
padding-left: 1px;
background-color: red;
display: inline-block;
line-height: 16px;
font-size: 18px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button>
Send
<span class="glyphicon-envelope"></span>
</button>
Change button display to table-cell and add vertical-align: middle to span glyphicon-envelope
button {
height: 50px;
display: table-cell;
margin: 0;
padding: 0px 40px;
position: relative;
z-index: 1;
}
span.glyphicon-envelope {
padding-left: 20px;
background-color: red;
display: inline-block;
line-height: 50px;
font-size: 18px;
vertical-align: middle;
}
See an example: https://jsfiddle.net/pdz696pv/2/
You could also just do:
span.glyphicon-envelope {
position: relative;
top: 2px;
}
Changing the value of the top property will move it up and down (you could use bottom as well obviously).
This is a simple solution if you don't wish to change any of the other properties of the envelope.
I'm having some trouble centering a text inside a div. The text, "Project description" is a little bit longer than the other options so it is displayed on two lines.
Here's the code responsible for this:
.left-menu {
float: left;
width: 109px;
margin-right: 33px;
}
.left-menu .button {
width: 108px;
height: 64px;
background-color: #E6E6E6;
margin-bottom: 32px;
text-align: center;
}
.left-menu .button a {
font-size: 18px;
font-weight: bold;
line-height: 64px;
color: #00359F;
text-decoration: none;
}
And here here is the fiddle.
How can I make the word "description" to be displayed right bellow the word "Project"?
Thank you!
Update these rules in your CSS file:
.left-menu .button {
width: 108px;
background-color: #E6E6E6;
margin-bottom: 32px;
text-align: center;
padding: 20px 0;
box-sizing: border-box;
}
.left-menu .button a {
font-size: 18px;
font-weight: bold;
color: #00359F;
line-height: 1.2em;
text-decoration: none;
}
I've changed the line height on the a and removed the fixed height on the button too as it's better to achieve what you're after with padding. See this link for a working version https://jsfiddle.net/sukky4r3/2/
I've updated your fiddle to match what you want.
All you'll have to do is still adjust the line-height property on the .left-menu .button a to match the exact spacing you want, I've set it to 30px to make it look 'alright' for now.
The way this works is by using tables, make the .left-menu .button display: table; and it's child .left-menu .button a display: table-cell; with vertical-align: middle; and it will center multiple lines vertically.
Your CSS will look like this
.left-menu .button {
width: 108px;
height: 64px;
background-color: #E6E6E6;
margin-bottom: 32px;
text-align: center;
display: table; // make the display table here.
}
.left-menu .button a {
font-size: 18px;
font-weight: bold;
line-height: 30px; // adjusted line-height so that multiple lines fit in one menu.
color: #00359F;
text-decoration: none;
display: table-cell; // child has to be table-cell
vertical-align: middle; // this vertically centers the text
}
fiddle here
css tricks article on the subject here
My current problem is that I have three div elements; one floated left, one floated right, and one between those two. I want the center div to automatically stretch to the max width of the width available between the two divs.
HTML
<div id="contain">
<div id="left">1</div>
<div id="filler"></div>
<div id="right">2</div>
</div>
CSS
#left {
text-decoration: none;
display: inline-block;
float: left;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#navFiller {
display: inline-block;
position: fixed;
float: left;
width: auto;
height: 45px;
background: #FF9000;
}
#right {
text-decoration: none;
display: inline-block;
float: right;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}
Jsfiddle of project:
http://jsfiddle.net/msEBU/
If you add your filler element after the floated elements, and then change up its styles a little bit (including giving the style-block the correct id), you can get what you're going for:
#left {
display: inline-block;
float: left;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#filler {
display: block;
float: none;
height: 45px;
background: #F00;
}
#right {
display: inline-block;
float: right;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}
<div id="contain">
<div id="left">1</div>
<div id="right">2</div>
<div id="filler">m</div>
</div>
OR, simulate a table:
#contain {
width: 100%;
padding: 0;
margin: 0;
display: table;
}
#left,
#right {
text-decoration: none;
display: table-cell;
width: 5%;
text-align: center;
background: #FF9000;
color: #FFFFFF;
padding: 2% 0;
}
#filler {
display: table-cell;
width: auto;
background: #F00;
}
<div id="contain">
<div id="left">1</div>
<div id="filler">m</div>
<div id="right">2</div>
</div>
Both methods have their benefits. It's up to you which is right for you.
Many implementations of CSS do not support automatic sizing relationships between different float layers. There are many solutions though. My recommendation is to use a small bit of javascript. I've used the following line of Jquery with some minor css tweaks:
$('#filler').outerWidth($('#contain').width()-$('#right').outerWidth()-$('#left').outerWidth());
Fiddle:
http://jsfiddle.net/K9C4u/2/
Also note that I moved the divs onto the same line because it makes a text node with a space for each of the return+tabs.
I have 3 divs inline. 2 of which have set px widths(outside divs). I want the center div to fill in all the space between the two outside divs when the window adjusts.
Here's an example of my attempt:
http://jsfiddle.net/3ZPHT
#div_1 {
float: left;
background: red;
display: inline-block;
width: 300px;
height: 50px;
text-align: left;}
#div_2 {
overflow: hidden;
background: green;
display: inline-block;
height: 50px;
text-align: center;
}
#div_3 {
float: right;
display: inline-block;
background: blue;
width: 350px;
text-decoration: underline;
font-weight: bold;
color: white;
height: 50px;
text-align: right;
}
Here's an idea of what I want it to look like:
http://jsfiddle.net/Q8eVz
Any help is very appreciated, thank you.
Demo: http://jsfiddle.net/3ZPHT/1/
HTML:
<div>
<div id="div_1">LEFT COL STATIC WIDTH 300px</div>
<div id="div_3">RIGHT COL STATIC WIDTH 350px</div>
<div id="div_2">CENTER COL DYNAMIC WIDTH</div>
</div>
CSS:
#div_1 {
float: left;
background: red;
display: inline-block;
width: 300px;
height: 50px;
text-align: left;}
#div_2 {
overflow: hidden;
background: green;
display: block;
height: 50px;
text-align: center;
}
#div_3 {
float: right;
display: inline-block;
background: blue;
width: 350px;
text-decoration: underline;
font-weight: bold;
color: white;
height: 50px;
text-align: right;
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
vertical-align: middle doesn't work
How can i make sure that the <a></a> is vertically centered in this div, regardless of the size of the div:
http://jsfiddle.net/XF9WM/
Thanks
Using display:table and display:table-cell, which works in all modern browsers (IE 8+):
.post {
width: 200px;
height: 200px;
background: rgba(0,0,0,0.8);
display:table;
}
.post h2 {
text-align: center;
width: 100%;
height: 100%;
display:table-cell;
vertical-align: middle;
}
.post h2 a {
color: #f7f7f7;
font-size: 2.2em;
font-weight: normal;
font-style: italic;
width: 100%;
}
I wanted to achieve it in a different way, (just for fun), and this one is working too:
jsFiddle
The idea is using a :before block element of 50% height.
html, body{
height:100%;
}
.post {
width: 400px;
height: 300px;
background: rgba(0,0,0,0.8);
}
.post h2:before{
content:"";
display:block;
height:50%;
}
.post h2 {
text-align:center;
height:100%;
}
.post h2 a {
color: #f7f7f7;
font-size: 2.2em;
margin-top:-20px;
display: block;
}
Hope it helps :-)
Give your link a line-height larger than the text will ever be, and vertically align it in the middle. Then absolutely position it's parent within the div to be at top: 50% and margin top minus half the link's line-height:
jsFiddle
.post {
position: relative;
}
.post h2 {
text-align: center;
width: 100%;
position: absolute;
top: 50%;
margin-top: -150px;
}
.post h2 a {
vertical-align: middle;
line-height: 300px;
white-space: nowrap;
}
It even works in IE7.
[UPDATED]
You can also do it like this: jsFiddle
.post {
width: 400px;
height: 200px;
background: rgba(0,0,0,0.8);
position:relative;
}
.post h2 {
position:absolute;
top:50%;
width:100%;
text-align:center;
}
.post h2 a {
line-height:100%;
color: #f7f7f7;
font-size: 2.2em;
margin-top:-20px;
display: block;
}
If you don't mind adding an extra HTML class, your simplest way is just to use vertical-align: middle.
http://jsfiddle.net/Wexcode/HtNJM/
<div class="post">
<span></span><h2>Hello!</h2>
</div>
CSS:
* { margin: 0; padding: 0; }
.post {
background: rgba(0,0,0,0.8);
width: 200px;
height: 200px; }
.post span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.post h2 {
position: relative;
text-align: center;
width: 100%;
vertical-align: middle;
display: inline-block; }
.post h2 a {
color: #f7f7f7;
font-size: 2.2em;
font-weight: normal;
font-style: italic;
display: block; }