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.
Related
I have been trying to make my child content vertically centered as per the parent container. But the child container is always in relative to parent container. Below is the code I have tried:
HTML
<section id="welcome" class="bg-primary d-flex flex-column">
<h1>Positions</h1>
<div class="container text-center my-auto">
Centered content
</div>
</section>
CSS
#welcome{
min-height:150px;
width: 200px;
}
What I am looking is to make Centered Content text vertically centered as per the whole section.
Here is the codepen link: CodePen
Just make h1 position-absolute to remove it from relative positioning within the DOM...
https://codepen.io/anon/pen/EeVXbe
<section id="welcome" class="bg-primary d-flex flex-column">
<h1 class="position-absolute">Positions</h1>
<div class="container text-center my-auto">
Centered content
</div>
</section>
Your h1 element is what's causing it to mis-align. If you get rid of it (just to test) you'll see centered content move to the center.
display: flex; applies to all of that elements direct children, so you're aligning to aggregate height of both the h1 and the #welcome element. To have Centered Content in the center of a tall square, you could apply some of the styles you have on #welcome to .my-auto:
.my-auto {
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
background: blue;
}
align-items is what does vertical alignment when using display: flex. However, if you use flex-direction: column, the direction is "rotated", so you would use justify-content: center, which is normally for horizontal alignment.
A different approach is to use padding on top and bottom of the content you want to center:
.my-auto {
padding: 50px 0; /* 50px is an arbitrary number, just to demonstrate */
}
Note that this will cause centered content to push all other elements vertically away from it.
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..
What is the best way to align content DIV vertically and horizontally on image in responsive.I can give position absolute and align top:some%,and left:some% but it wont align middle of the image container in some screens, and i can give margin-top:-%,margin-left:some% this one also won't align properly for some times means in different screens.Is there any other way to do it.The content div should be exactly placed middle(horizontally and vertically in all screens) on the image. what is the best way to do it?
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="img/someimage.png" class="img-responsive">
<div class="content_div">
image content paragraph 1
image content paragraph 1
image content paragraph 1
</div>
</div>
The content div must be placed at the middle of image.
<div class="container">
<img goes here>
<div text goes here>
</div>
CSS
.contianer
{
position: relative;
}
.container img, .container .txt
{
position: absolute;
}
.container img
{
//Width and height
}
.container .txt
{
width: 100%;
margin: auto;
line-height: height of image div; // It ll pace in the middle of image
}
Demo It ll help you.
Another way is
set table layout for div and table-cell for content which will support vertical-align:middle`
EDIT:
Demo2 -- It ll help You.
Thanks to SO
Want to know the reason for this behavior.
CSS
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Empty div
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
behavior: element increases from bottom to top (height)
div with text
<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>
behavior: element increases from top to bottom (height)
see it in action: http://jsfiddle.net/8GGYm/
Basically it got to do with the way that vertical-align: is calculated. So if you put vertical-aling:bottom; attribute in the css then you will notice it will be the same with and without text.
you can read the this for more details.
When the div has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be). so there is a little difference in calculating with and without text.
Hope this is helpfull.
please see here: http://jsfiddle.net/dd24z/. By default text is vertical-align: top, but you can change that behavior:
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
vertical-align: bottom;
}
http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height
'vertical-align': baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Add
vertical-align: bottom;
to your CSS. Hope it works as you want.
I guess this can be explained by the text alignment, independently from divs.
Text, when placed in a div, is vertically aligned to top-left by default. Those divs without text align beside each other (inline-block) expanding the page downwards. If you add another div, you'll see the second header going further down.
<h1>Empty div</h1>
Some text
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
continuing here
<h2>Div with text</h2>
Some text
<div style="height:20px;">20</div>
<div style="height:40px;">40</div>
<div style="height:60px;">60</div>
<div style="height:80px;">80</div>
continuing here
...
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Fiddle
In the above fiddle, you can see that the text line is the "guideline".
Maybe this is the explanation: once the divs have text in them, they will align it with the surrounding text and, if inexistent, then they align their bottom line.
I'm sorry, maybe not very clear but I hope you understand my view.
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.