I know its extremely simple, but I have been coding all day and it doesn't seem to work.
I want the text to be vertically centered inside the box.. What am i doing doing?
http://jsfiddle.net/UAyNh/
UPDATE:
That worked for the text, but the buttons wont center. Check it out on Safari vs. Chrome.
http://jsfiddle.net/Bz9pB/
I give a container line-height equal to its height.
eg.
div.box
{
line-height: 40px;
height: 40px;
}
The only other way I know is to either use a table or replicate a table with CSS:
<div class="table">
<div class="row">
<div class="cell">
text
</div>
</div>
</div>
And
div.table{ display: table; }
div.row{ display: table-row; }
div.cell
{
display: table-cell;
vertical-align: middle;
}
Use line-height and make that equal to the height of the element (so long as your element only has one line, anyway):
height: 25px;
line-height: 25px;
JS Fiddle demo.
If the text will be on one line and the height of that line is similar to that in your example, you can solve it by setting the line-height:
height: 25px;
line-height: 25px;
Related
So I have this HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-6"> <span class="currency-symbol">$</span><span class="price">44</span>
</div>
<div class="col-xs-6">
<p>/ month</p>
<p>Here are some really interesting things about the product.</p>
</div>
</div>
</div>
</div>
and then this CSS
.container {
width: 333px;
margin: 0 auto;
}
.currency-symbol {
vertical-align: top;
font-size: 33px;
}
.price {
font-size: 88px;
vertical-align: top; /* doesn't work */
}
The '$' symbol aligns to the top as does the text in the RH column. But the price amount doesn't.
How do I vertically align the '$' symbol, the '44' amount and the text in the RH column so that they're all in line?
JSFiddle here: http://jsfiddle.net/magician11/4k19w0fs/3/
Thanks.
you can try line-height on your price class
.price {
font-size: 88px;
line-height: 80px;
}
It actually does work, just it doesn't look like it.
Highlight the "44" and you'll see the highlight extends quite a way beyond the top of the digits. The only real way to do this is going to be fine-tuning the line-heights, or margin-tops of each element.
.price {
line-height:77px;
}
That seems pretty close to me. Note that other fonts (or even other digits) might be different.
try to edit price class like this?
.price {
font-size: 88px;
vertical-align: top;
position: relative;
left:5px;
top:-22px;
}
I am not entirely sure what you are asking for though... maybe this is what you need
Just make the line-height: 1; on the .price span to give it the same alignment as space-height.
.price {
font-size: 88px;
line-height: 1;
}
This aligns each of the elements. However, I also recommend looking-up vertical rhythm and how to get textual elements to maintain the same vertical space.
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
hey guys i am trying to center contents of 2 divs vertically , basically the structure that i have is this :
<div>
<div class="left">
<span>
ONCE YOU <br>
PICK US, <br>
YOU WILL <br>
NEVER <br>
WANT TO <br>
GO <br>
ANYWHERE <br>
ELSE <br>
</span>
</div>
<div class="right">
<span>Abouts us</span>
<button class="about-btn">Know More</button>
</div>
</div>
and the technique i am using is the following , which i picked up from solution from a stackoverflow example :
span:after {
content:'';
height: 100%;
display: inline-block;
vertical-align: middle;
}
span {
display:inline-block;
vertical-align:middle;
font-weight: 700;
letter-spacing: -3px;
height: 100%;
}
the problem with this solution is that the is not the only content in the div and so its not viable for me to give the span height:100% as if i have to another element that comes after the span and since the span has a height of 100% in element is pushed outside the main container .
fiddle here.
Also another problem is the contents of the <div class="left"> are not vertically centered with this technique .
i am also trying the display:table solution but that seems to be messing up the layout .
can somebody please help me out with this.
EDIT:: i was trying to follow this solution , by hashem .
thank you .
Alex-Z.
Here's how it could be done with a table layout :
http://jsfiddle.net/xe6n14xq/
Identifying the parent a making it a table :
#wrap {
display: table;
width: 100%; // displaying as table makes the content shrink-wrap
}
Then the children can become vertically aligned table-cells :
.right, .left {
height: 500px;
width: 50%;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3em;
}
You could also do a vertical transform on the children's content :
http://jsfiddle.net/0sop57yc/
span, .about-btn {
display: block; // Chrome apparently doesn't agree with inline-block here
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
Edit - not sure who added the width: 100% for the table but that was a good fix, thanks.
I have some boxes in HTML but one of the boxes is getting shifted from its place. Here is JsBin Demo
HTML
<div id="summary">
<div class="box"><span>Average fill time</span></div>
<div class="box"><span>Listing</span></div>
<div class="box"><span>Archive</span></div>
<div class="box"><span>Views</span></div>
<div class="box"><span>Submissions</span></div>
</div>
CSS
.box {
height: 60px;
width: 80px;
display: inline-block;
text-align: center;
padding: 20px;
border: 1px solid;
margin: 10px;
}
Screenshot
PS: I know this is happening due to three words in the box. Setting overflow-y: hidden fix this problem. But I want to know why is this happening at first place ?
Example code : http://jsbin.com/elOdOpa/1/edit
Add vertical-align: top to your .box elements (since vertical alignment is baseline by default and the current alignment is shown as in the picture below
You could change display:inline-block; to float:left;.
JSBin
The css property vertical-align: middle does not work in this example.
HTML:
<div>
<span class='twoline'>Two line text</span>
<span class='float'> Float right </span>
</div>
CSS:
.float {
float: right;
}
.twoline {
width: 50px;
display: inline-block;
}
div {
border: solid 1px blue;
vertical-align: middle;
}
The span that is floating on the right is not vertically centered with respect to its containing div. How can I have it vertically centered?
The above code is in this fiddle.
You must wrap your element in a table-cell, within a table using display.
Like this:
<div>
<span class='twoline'>Two line text</span>
<span class='float'>Float right</span>
</div>
and
.float {
display: table-cell;
vertical-align: middle;
text-align: right;
}
.twoline {
width: 50px;
display: table-cell;
}
div {
display: table;
border: solid 1px blue;
width: 500px;
height: 100px;
}
Shown here: http://jsfiddle.net/e8ESb/7/
Vertical align doesn't quite work the way you want it to. See: http://phrogz.net/css/vertical-align/index.html
This isn't pretty, but it WILL do what you want: Vertical align behaves as expected only when used in a table cell.
http://jsfiddle.net/e8ESb/6/
There are other alternatives: You can declare things as tables or table cells within CSS to make them behave as desired, for example. Margins and positioning can sometimes be played with to get the same effect. None of the solutions are terrible pretty, though.
You should set a fixed value to your span's line-height property:
.float, .twoline {
line-height: 100px;
}
The answer given by Matt K works perfectly fine.
However it is important to note one thing -
If the div you are applying it to has absolute positioning, it wont work. For it to work, do this -
<div style="position:absolute; hei...">
<div style="position:relative; display: table-cell; vertical-align:middle; hei...">
<!-- here position MUST be relative, this div acts as a wrapper-->
...
</div>
</div>