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.
Related
I have set display flex for parent element because I need pseudo element and the text be next to each other. But I also put part of the text inside span tag to make it more light, but in that case, display flex also distribute spacing between my words outside span tag. Here you see:
Instead I need in products and services be displayed like a normal sentence because it's part of the same p tag div, it's just that the first few words are wrapped in span tag too.
The code:
#page-sub-header p {
margin-left: 0;
font-size: 40px;
font-weight: 400;
text-align: left;
line-height: 1.2;
padding-bottom: 60px;
display: flex;
}
#page-sub-header p:before {
content: "";
display: block;
width: 5px;
height: 150px;
background-image: url(rectangle.jpg);
margin-right: 15px;
float: left;
}
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="sub_container">
<p class="header_tag">
<span>Maintaining only the highest standards of quality</span> in products and services.
</p>
</div>
</div>
</div>
</div>
Two things is going on here:
the rightmost, unwrapped, text becomes an anonymous flex item, which is kind of equal to have it wrapped (which I did in below sample to show how it all behaves).
the space you get is because when the inner left span wraps its text, the span itself aren't aware of that and won't adjust its width.
This is the box models default behavior, and happens whether you use Flexbox or not.
So either you need a script to calculate and adjust the left span's width, or use a media query.
As a note, the display: block, and the edited float: left, has no impact since the pseudo is a flex item, also, the float: left can actually cause issues as well on some browsers.
Stack snippet - with added borders so you can see how it behaves when resize the browsers width.
p {
margin-left: 0;
font-size: 40px;
font-weight: 400;
text-align: left;
line-height: 1.2;
padding-bottom: 60px;
display: flex;
}
p span {
border: 1px solid red;
}
p:before {
content: "";
/*display: block; does not apply on flex item's */
width: 5px;
height: 150px;
background: red;
margin-right: 15px;
}
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="sub_container">
<p class="header_tag">
<span>Maintaining only the highest standards of quality</span> <span>in products and services.</span>
</p>
</div>
</div>
</div>
</div>
I have two divs. First one has a image file and the other one has a username. I just want to align the second div vertically center just like this way.
But this one is not aligned perfectly. This screen already coded but the problem is that I still couldn't figure out the perfect way to align middle the user name div. I just use my naked eye and adjust padding.
Here is the my code
.tag-header {
padding: 12px;
overflow: auto;
}
.tag-header .tag-header-img {
height: 55px;
width: 55px;
border-radius: 50%;
float: left;
}
.tag-header .info {
padding: 14px 11px;
display: inline-block;
font-size: 1.3rem;
line-height: 14px;
}
.tag-header .info p {
margin: 0;
font-weight: 600;
line-height: 1;
font-size: 1.3rem;
}
.tag-header .time {
display: block;
font-size: 1.2rem;
}
.info span {
font-weight: 300;
color: #b9b9b9;
}
<div class="tag-header">
<div class="col-md-6">
<div class="row">
<img class="tag-header-img" src="http://blog.couchbase.com/binaries/content/gallery/speakers/kirkk.jpg" alt="">
<div class="info">
<p>John Stevens</p>
<span class="time">2 minutes ago</span>
</div>
</div>
</div>
fiddle
Any solution?
Heres your fiddle updated https://jsfiddle.net/p4x7d3fq/5/ -- i added borders just so you can see.
Using display:table-cell you can achieve this, if you don't mind the slight changes, including the addition of a height to match that of your image.
You seem to have done an ok job making them both have the same height, the image doesn't have to use float: left;, you can also use display: inline-block; on it and vertical-align: middle; on both the image and the name, this way you don't need them to have the same height.
Also, make sure you use Bootstrap properly, you first need a "container" div, in the container you put a row, and in that row you put columns.
You only put a div with a row class in a column div if you want more columns in that column.
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
Try to use flexbox:
.info {
display: flex;
}
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;
}
I'm creating a contact card style layout, with a photo and text next to it, as demonstrated in this fiddle here:
http://jsfiddle.net/L7pWv/5/
HTML:
<div class="container">
<div class="contact-card">
<div class="photo"></div>
<div class="details">
<span class="name">My Name</span>
<span class="description">This is some really long text that should wrap nicely when things all work OK</span>
</div>
<div class="clearfix"></div>
</div>
<div class="contact-card">
<div class="photo"></div>
<div class="details">
<span class="name">My Name 2</span>
<span class="description">Short description</span>
</div>
<div class="clearfix"></div>
</div>
</div>
CSS:
.container {
width: 350px;
}
.contact-card {
background-color: whitesmoke;
border-bottom: 1px solid #ddd;
white-space: nowrap;
}
.contact-card .photo {
float: left;
width: 80px;
height: 50px;
background-color: tan;
margin: 10px;
}
.contact-card .details {
display: inline-block;
margin: 10px 0;
}
.contact-card .name {
display: block;
font-weight: bold;
line-height: 1em;
}
.contact-card .description {
display: block;
font-size: 0.8em;
color: silver;
line-height: 1em;
white-space: normal;
}
.clearfix {
clear: both;
}
As you can see from running the fiddle, when the text is really long, it does wrap eventually, based upon my white-space setting, but it exceeds the size of the contact card before doing so. I could put a right margin of 90px on the "description" class to keep the text within the bounds (which works), but I can't help but feel this is wrong. I'd like it to naturally want to stay within its parent's bounds, but can't think of the best way to achieve that. Any ideas?
Consider making these changes:
.contact-card {
display: inline-block;
}
.contact-card .details {
display: block;
}
This will keep each card displaying inline while keeping the text of the card inside the block without specifying a margin.
Kind of a tricky one, as I don't know what uses you'll be putting this in, but I'd probably do it with these changes.
Get rid of
<div class="clearfix"></div>
It's not needed if you make a simple addition like:
.contact-card {
float:left;
}
Then change .contact-card .details to this:
.contact-card .details {
padding: 10px 0;
}
That should give you the "The width of the details element should really be dictated by the parent." behaviour you're after
http://jsfiddle.net/L7pWv/6/
I suggest just don't use inline-block for this. You don't want the .detail element overflow on it's parent element. Because you already floated your photo, you can just place the element next to the photo element.
Note that you should use padding when you want space inside the element and use margin when you want it outside of the element.
There is no need for white-space: nowrap; as you floated the photo.
jsFiddle
The only thing i changed is the use of padding and margin and removed the white-space .
CSS:
.contact-card .details {
display: inline-block;
margin: 10px 0;
width:70%;
}
Fiddle: http://jsfiddle.net/L7pWv/2/
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;