I'm having trouble aligning my divs. My divs have no set height so they take the height of how much text is inside.
Here is a photo of what it looks like now.
Notice the prince post is aligned right and under that post is another post aligned under it. I can't seem to figure out what's going wrong in this.
Here is my html:
<div class="row" style="padding:30px 10px 30px 20px; margin:auto; display:block;">
<div class="large-12 column large-columnz">
<img src="">
<div class="row column">The Title
Article Excerpt</div>
</div>
</div>
</div>
Here is the css:
.large-columnz {
max-width:560px;
margin-bottom:10px;
display: inline-block;
vertical-align: top;
*display: inline;
}
I am using the Foundation responsive framework to design my site as well as my own incorporated css.
Can anyone tell me what I am doing wrong which causes the last two post to not align.
in the parent div that wraps all the divs ( if you don't have a wrapping div then add 1 ) and then add display: flex; in the parent div style and all the child containers will have the same height..
Related
I'm trying to implement tiles for prices including div container, image and caption. The problem is that images are of different sizes (and shouldn't be resized) so I cannot get everything aligned
Tried to add vertical-align to image (baseline) and caption (top) but the tiles are still not aligned in this case. Here is the example:
Tiles are not aligned
html:
<div class="container">
<div class="tile-topup tile-blue">
<img src="coin-1.png">
<h4>1$</h4>
</div>
<div class="tile-topup tile-green">
<img src="coin-2.png">
<h4>2$</h4>
</div>
<div class="tile-topup tile-purple">
<img src="coin-3.png">
<h4>3$</h4>
</div>
<div class="tile-topup tile-red">
<img src="coin-4.png">
<h4>4$</h4>
</div>
</div>
css:
.tile-topup {
display: inline-block;
width: 10em;
height: 10em;
padding: 1em;
margin: 0.2em;
text-align: center;
background-color: #ccc;
}
Images, text and tiles should ve vertically aligned. Any ideas?
display: block;
margin-right: auto;
margin-left: auto;
Change 'display: inline-block' to 'display: block'
This will make it so that every image starts out on a new line beneath the previous one.
Then set 'margin-left: auto' and 'margin-right: auto'
This adds enough margin on either side of the boxes to centre your images.
Use these classes for the tile-topup.
- d-flex
- flex-column
- align-items-center
Doing so, the img and h4 are aligned horizontally in the center. use justify-content-center Should you want to align them vertically in the center too. Moreover, you need to remove the display property of the tile-topup selector since you use d-flex. If you do not want to resize the images, remove the height and width too.
You may use d-flex for the container too.
I have 3 divs like so:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
with the following CSS:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
}
When the divs are empty, this code works fine. All divs align along the same horizontal plane. But! When I put any content in 1 or 2 divs, the divs with the content move down about 90% of the height:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3"></div>
Divs 1 and 2 are now spaced down in comparison to the normally aligned div 3. The plot really thickens when I add content to the final div:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3">Z</div>
Now all three divs are properly aligned at page top again. Not sure what's happening here or the proper work around?
This is happening because the default vertical-align for a inline block element is baseline*.
This image from CSS Tricks helps to demonstrate the baseline of text:
As you can see, the baseline isn't how far down the text goes, it is the line that the text is aligned on. With vertical-align:baseline, the div with no content aligns with the baseline created by the <div>'s with content.
This image may help you visualize what's happening(or, you can play with the jsfiddle):
To make all your <div>'s align, no matter the content, set vertical-align:top;:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
vertical-align:top;
}
This article also helps explain vertical-align some more
* W3 Specs
I made this design, that contains 2 types of content boxes, one which contains pictures and one that doesn't. All the boxes that don't have a picture have the same size. And the bottom margin should also be equal like this:
But because the boxes with pictures are bigger, and I'm using "float" the bottom boxes are being placed according to the bottom margin of the biggest box at the top, which causes it to leave a lot of blank space in between.
Is there any way to float the bottom boxes under the small boxes? I have tried both with floats and "displays" but nothing seems to work.
This is my code:
<div class="contentBox">
<div class="contentBoxHead">
</div>
<div class="contentBoxPicture">
<img src=" /categoria/articulo/images/" />
</div>
<div class="contentBoxDescription">
<h2 class="contentBoxDescriptionText">
</h2>
<h3 class="contentBoxDescriptionText">
</h3>
</div>
</div>
...
.contentBox{
width: 300px;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
I have removed all the CSS related to the inner child divs of "contentBox" for it doesn't seem to be the problem here.
Please note that this is for a CMS type of site and I am trying to make this work the same way if all the boxes have pictures or not, and even if the order is completely different. For that reason I can't hardcode the positions.
I don't believe this is achievable with CSS only solution. But this is basically so called masonry layout. You can achieve it with e.g. this JavaScript library: http://masonry.desandro.com/
put the divs with content in one div and image one in another div.
for ex.
<div class="content_description">
<div class="content_1"></div>
<div class="content_2"></div>
</div>
<div class="content_image">
<img src=""></img>
</div>
and then put css like
.content_description {
width : 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.content_image {
width: 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
cover all of this with another div where you define your float left.
If you don't need very fine control over the content flow then you can use CSS columns. I prepared a little demo for you where you can see there is no float, content is wrapping, height is properly preserved.
Demo: http://jsbin.com/pesoto/edit?html,css,output
Have fun and explore CSS3 features, theres a lot of good stuff there. :)
This question already has answers here:
How to use vertical align in bootstrap
(8 answers)
Closed 8 years ago.
I have a very simple problem on vertical middle a span using Bootstrap 2.3.2.
Requirements:
There are two columns, left column has a fixed height 300px because there is 300x300 image inside.
Right column has text and must be centered based on left column.
The whole thing must be responsive. That's why I am using responsive image.
If the second column goes down to bottom, its height must fit the size of text. That means I cannot set fixed height on the second column.
Must not use JS to solve this.
HTML:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<img class="img-responsive" src="http://placehold.it/300x300"/>
</div>
<div class="span6 v-center">
<div class="content">
<h1>Title</h1>
<p>Paragraph</p>
</div>
</div>
</div>
</div>
CSS:
.v-center {
display:table;
border:2px solid gray;
height:300px;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
}
My code: http://jsfiddle.net/qhoc/F9ewn/1/
You can see what I did above: I basically set the second column span as table and middle the .content table-cell. I copied that method here How to use vertical align in bootstrap (with working example here http://jsfiddle.net/lharby/AJAhR/)
My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.
Add !important rule to display: table of your .v-center class.
.v-center {
display:table !important;
border:2px solid gray;
height:300px;
}
Your display property is being overridden by bootstrap to display: block.
Example
.row {
letter-spacing: -.31em;
word-spacing: -.43em;
}
.col-md-4 {
float: none;
display: inline-block;
vertical-align: middle;
}
Note: .col-md-4 could be any grid column, its just an example here.
I've read about 20 questions and articles on vertical alignment/centering in HTML/CSS, but I'm still unable to get my specific case working a expected.
Please have a look at http://jsfiddle.net/pf29r/3/
<div class="outer">
<div>Left1</div>
<div>Left2</div>
</div>
<div class="inner">
Before
<span>Middle</span>
After
</div>
<div class="outer">
<div>Right1</div>
<div>Right2</div>
</div>
.outer {
display: inline-block;
}
.inner {
display: inline-block;
}
I want to vertically center the content of the inner block. The best I've been able to accomplish was by using display: table and display: table-cell, which almost works, but the content isn't quite in the middle.
What am I missing?
Add vertical-align: middle to .outer. This is counter-intuitive because you would expect to have to add it to .inner, but it works.
http://jsfiddle.net/pf29r/5/