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;
}
Related
My top div acts as a logo and has a title. I would like a logout button to be on the right-hand side of the div and text above also right-aligned.
I left out the button/ link as i did not know where to place it.
I'm looking for something like this:
My goal is a logo and, on the right, the logout button with text on the top.
How can I achieve that?
.logo {
overflow: hidden;
text-align: left;
position: relative;
margin: 0px 100px;
height: 60px;
background-color: pink;
color: blue;
font-family: Arial;
}
<div class="logo">
<h1>LOGO</h1>
</div>
You can use flexbox here. Try this out:
.wrap {
display: flex;
justify-content: space-between;
}
.logo {
overflow: hidden;
text-align: left;
position: relative;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
<div class='wrap'>
<div class="logo">
<h1>LOGO</h1>
</div>
<div>
<p>abcdefg</p>
<button>Click It</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/dm198kpx/2/
There are various ways to achieve what you want. I believe the simplest one is with Flexbox:
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
<div class="flex justify-between">
LOGO
<div>
BLABLABLA<br>
<button>Logout</button>
</div>
</div>
Here, flex is a display property that is usually used in container-type elements (like div). It helps to align content. It allows the use of various other properties like justify-content, align-items* and others. In this case, we are using only justify-content, which align direct children on the main axis (the horizontal one by default), with the space-between value, which distributes the content as far as possible - and since we have only two direct children of <div class="flex justify-between">, LOGO and <div>, put the first on the far left and the last on the far right.
*: you can learn more about Flexbox properties and use cases in this game: https://flexboxfroggy.com/
I've added the button to what I think is your header? I used the native header tag, but if it isn't your header, you can always replace this with a div with a unique id of your choice. I included position:fixed; in the css, otherwise the button wouldn't stay to the right (you could use float, but it can be problematic imho). Height/colour etc are adjustable of course.
Hope this helps
h1.logo {
display: inline-block;
position: relative;
text-align: left;
margin: 10px 100px;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
#logout {
background-color: lightblue;
height: 30px;
text-align: right;
right: 40px;
position: fixed;
}
.logo,
#logout {
vertical-align: top;
}
<header>
<h1 class="logo">LOGO</h1>
<button id="logout">Logout</button>
</header>
EDIT: Just saw the text-above edit to your question. See fiddle
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 a bunch of images in a row that I want to align with bootstrap glyphicons in the same row. So far, the glyphicons are much higher than the images, and I can't figure out why. The only margin I changed was left-right. The elements are nested inside a row. I am using reset.css, animate.css and bootstrap.
I can't figure out, how to make the glyphicons align with the images. Edit: they are nested inside divs to add angular classes and functions. Any help appreciated.
html:
<div class="row carousel-thumbnails">
<div class="col-xs-12">
<div><span class="glyphicon glyphicon-chevron-left"></span></div>
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<div><span class="glyphicon glyphicon-chevron-right"></span></div>
</div>
</div>
css:
.webpage {
margin-top: 2em;
}
.link-list {
text-align: center;
}
.link-icon {
display: inline-block;
}
.link-image {
height: 3em;
width: 3em;
border-radius: 120px;
margin: 0 1em;
}
.thumbnail {
text-align: center;
}
.carousel-thumbnails {
text-align: center;
}
.carousel-thumbnails img {
width: 6em;
height: 6em;
margin: 0 0.5em;
}
.carousel-thumbnails div {
display: inline-block;
}
.carousel-thumbnails div span{
font-size: 5em;
}
.active {
border: 0.1em solid red;
}
Codepen link if you wanna fiddle :). Thanks for the help.
Its really simple
.carousel-thumbnails div span{
vertical-align: middle;
}
Add this in your style.
EDIT: As #Druzion said, the icons are vertical-aligned to the top of containing div by defualt. we need to give vertical-align: middle inorder to place them vertically center.
You can give
.glyphicon{ vertical-align: middle}
Both do the same trick
Here is the updated CODEPEN
All the images are vertical-align: middle, however the icons do not have this rule, so they are vertical-align to the top of the containing div.
Add vertical-align: middle to your divs containing the icons to line them all up
CODEPEN
add this to your images carousel class: margin-bottom: 4em;
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'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/