I am trying to for Flex Layout the image only needs to align center not the text.
Currently I have two flex box the first box both Text and the second one Text and image so when I align items both also aligning center I need only Image to align center not the Text.
flex-container {
border: 1px solid;
display: flex;
align-items: center;
}
.flex-item {
flex: 1 auto;
border: 1px solid green;
height: 100%;
display: flex;
justify-content: center;
}
.flex-center {
align-items: center;
}
<div class="flex-container">
<div class="flex-item">I'm top dog!
</div>
<div class="flex-item flex-center">
I want to be vertically centered! And I am!
</div>
</div>
<div class="flex-container">
<div class="flex-item">I'm top dog!Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle ... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD. Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle
... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD.
</div>
<div class="flex-item flex-center">
<img src="data:image/jpeg;base64,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"
/>
</div>
</div>
This is the Plunker any one have idea please
expected
Remove flex-center from this div
<div class="flex-item">
I want to be vertically centered! And I am!
</div>
Keep the class on the div containing the image
<div class="flex-item flex-center">
<img src="" />
</div>
Change .flex-center in CSS to
.flex-center {
align-self: center;
}
Updated plunkr
Fixed typo and removed redundant styles.
.flex-container {
border: 1px solid;
display: flex;
}
.flex-item {
border: 1px solid green;
height: 100%;
}
.flex-center {
align-self: center;
}
<div class="flex-container">
<div class="flex-item">I'm top dog!
</div>
<div class="flex-item flex-center">
I want to be vertically centered! And I am!
</div>
</div>
<div class="flex-container">
<div class="flex-item">I'm top dog!Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle ... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD. Previous. Next. Image for Scented Lolly Dude Small Hardtop Pencil Case from Smiggle
... Tall Pencil Pack X24 any 2 for $20 Tall Pencil Pack X24 $12.95 AUD.
</div>
<div class="flex-item flex-center">
<img src="data:image/jpeg;base64,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"
/>
</div>
</div>
Related
I want to achieve something like this
and I thought about using a flexbox to put these items in one row.
#container {
display: flex;
}
<div id="container">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
</div>
The first and the second div container should have the default alignment on the left side. The third container should be aligned at the right side of the parent container.
I don't want to use flex: 1 because on large screen sizes the spacing between div 1 and 2 would be too big. They should be placed close to each other.
When the screen size gets smaller, the space between the second and the third container should get smaller until the third container is next to the second container. To prevent the overlap I simply want to remove the flexbox with
#media(max-width: 500px){ /* just a sample width */
#container{
display: block
}
}
How can I achieve that?
This could be a solution to your problem. I added <div id="separator"> to separate (box 1 & 2) from (box 3). After that I used justify-content: space-between; on the main containerSee demo below:
#container {
display: flex;
justify-content: space-between;
}
#separator{
display: flex;
}
.box{
border: 1px solid black;
}
#media screen and (max-width: 500px) { /* just a sample width */
#container, #separator{
display: block;
}
}
<div id="container">
<div id="separator">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
No need to add extra HTML just add margin-left:auto to the last box
#container {
display: flex;
}
.box {
border: 1px solid green;
margin: 0 .25em
}
.box:last-child {
margin-left: auto;
}
<div id="container">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
</div>
Maybe I don't have it setup right? I've been looking at code for the past 3 hours so it's possible I'm over looking something. Either way I have this h3 in a div and I want it to be centered both horizontally and vertically, however only horizontal is working.
<div class="col-md-4">
<div class="align-items-center" style="background-image:url({{ uni.u_homepage_pic.url }}); background-repeat:no-repeat; width: 350px; height: 225px;">
<h3 class="text-center" style="color:#ffffff;">{{ uni.u_name }</h3>
</div>
</div>
Update: Using Bootstrap V4
.align-items-center {
display: flex;
align-items: center; /*Aligns vertically center */
justify-content: center; /*Aligns horizontally center */
}
<div class="col-md-4">
<div class="align-items-center" style="background:red; width: 350px; height: 225px;">
<h3 class="text-center" style="">Hello</h3>
</div>
</div>
This answer is for bootstrap 4:
To vertically align the column content, you can use my-auto class in column itself:
<div class="col-md-4 my-auto">
<div style="background-image:url({{ uni.u_homepage_pic.url }});
background-repeat:no-repeat; width: 350px; height: 225px;">
<h3 class="text-center" style="color:#ffffff;">
{{ uni.u_name }
</h3>
</div>
</div>
Further, to align the items inside a column horizontally, you can use mx-auto and for both horizontal and vertical alignment, use m-auto. Horizontal align will work for single column.
To align all the columns, you need to supply the align-items-* classes inside the row element but not inside the col element:
<div class="container">
<div class="row align-items-start"><!-- align contents to top -->
<div class="col">
Top A
</div>
<div class="col">
Top B
</div>
<div class="col">
Top C
</div>
</div>
<div class="row align-items-center"><!-- align contents to center -->
<div class="col">
Mid A
</div>
<div class="col">
Mid B
</div>
<div class="col">
Mid C
</div>
</div>
<div class="row align-items-end"><!-- align contents to end -->
<div class="col">
Bottom A
</div>
<div class="col">
Bottom B
</div>
<div class="col">
Bottom C
</div>
</div>
</div>
Hope this helps!
try with flex and align-self-center:
<div class=”row”>
<div class=”col-6 align-self-center”>
<div class=”card card-block”>
Center
</div>
</div>
<div class=”col-6">
<div class=”card card-inverse card-danger”>
Taller
</div>
</div>
</div>
check this css
<div class="col-md-4">
<h3 class="centered">{{ uni.u_name }</h3>
</div>
and this is the css (put it in the head tag)
<style>
.centered {
display: flex;
flex-direction: row !important;
align-content: center !important;
justify-content: center !important;
align-self: center !important;
align-items: center !important;
margin:auto;
background-image:url({{ uni.u_homepage_pic.url }});
background-repeat:no-repeat;
width: 350px;
height: 225px;
color:#ffffff;
}
<style>
you can do this like in my example: https://jsfiddle.net/h5xofjqf/
or you just need set a fixed height to your container, then, the h1 would have a
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Property is a margin:auto; ...Do this
In Chrome, when I search for recipes on my website, it will stretch the element with the id of recipeSection to fit all the recipes that match the search request.
However in Firefox, the child elements will just flow on out of the parent element (or when I open dev tools, they all smush together to fit in the container??).
I've done a lot of research on positioning and flow in the last couple hours and looking at similar questions on StackOverflow - I've been yet to find anything that can fix my issue. Any ideas?
You can test it at this website
Just put in any ingredient in the searchbox at the top of the page. Flour works. The project uses materialize framework but it's not being used very much here.
#recipeSection {
width: 70%;
height: auto;
background-color: #e5e5e5;
display: flex;
flex-direction: column;
align-items: center;
}
.recipeStyle {
width: 80%;
height: auto;
margin: 2.5%;
padding: 1%;
border-radius: 5px;
font-size: 2.2rem;
color: #2d2d2d;
text-align: left;
font-family: 'mada';
display: flex;
justify-content: space-between;
align-items: center;
}
.recipeTitle {
width: 80%;
cursor: pointer;
padding: 10px;
}
<div id="recipeSection">
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
</div>
Changing the padding and margin to be measured in px instead of a percentage has solved the issue. not entirely sure why - is this percentage not being calculated into the height created by auto, leaving the parent container not to be large enough for its child elements? That seems like a peculiar interaction.
I have 2 threads in an imageboard stacked on top of each other, each thread has some text and an image file.
I want images to be always on right of the thread, instead of being on top of reply button.
When I float image to right by float: right; the images keep stacking on top of each other instead and form a branch like structure
How do I force images with post-image class to not break <div> structure of following thread and stay on right of screen?
<div class="you" id="thread_27" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704253855.jpg <span class="unimportant">(78.69 KB, 1024x768, <span class="postfilename">soft-color-background.jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704253855.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_27">
<p class="intro">
<input class="delete" name="delete_27" id="delete_27" type="checkbox">
<label for="delete_27"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:30:54Z">02/05/16 (Fri) 22:30:54</time>
</label> <a class="post_no" id="post_no_27" onclick="highlightReply(27)" href="/b/res/27.html#27">No.</a><a class="post_no" onclick="citeReply(27)" href="/b/res/27.html#q27">27</a>[Reply]</p>
<div class="body">xxxxxx2</div>
</div>
<br class="clear">
<hr>
</div>
<div class="you" id="thread_26" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704190918.jpg <span class="unimportant">(157.33 KB, 1024x768, <span class="postfilename" title="mac-style-presentation-background.jpg">mac-style-presentation-bac….jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704190918.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_26">
<p class="intro">
<input class="delete" name="delete_26" id="delete_26" type="checkbox">
<label for="delete_26"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:29:51Z">02/05/16 (Fri) 22:29:51</time>
</label> <a class="post_no" id="post_no_26" onclick="highlightReply(26)" href="/b/res/26.html#26">No.</a><a class="post_no" onclick="citeReply(26)" href="/b/res/26.html#q26">26</a>[Reply]</p>
<div class="body">xxxxx</div>
</div>
<br class="clear">
<hr>
</div>
when I add CSS
.post-image
{
float: right;
}
it breaks everything.
jsfiddle before
js fiddle after floating post-image to the right
This happens because of float left or right. clear controls the float behavior hence, the ideal way is to make all the float properties inside a container usually div. Sometimes, browser renders it differently so whenever coming to a new container or sibling, ideal way is to clear the float(if you don't need the floating property).
In your code you could probably
Add this:
.clear{
clear:both;
}
to better understand. Also don't forget to play with it to put it ideally where it is required.
If you can use flexbox (no way to old browsers) try something like:
.row{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
.col1{
position: relative;
flex: 1 1 100%;
align-self: stretch;
overflow: hidden;
}
.col2{
position: relative;
display: flex;
flex-direction: column;
flex: 0 1 45px;
align-self: stretch;
}
on a html strukture like
<div class="row">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
Add one more div with "clear: both" styling will fix your problem.
<div class="file">
your code here...
<div style="clear:both"></div>
</div>
jsfiddle
I am using the Flex Grid component of Zurb Foundation 6 to create a grid of responsive squares -- and that works beautifully. For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc. There must be something I am missing -- thanks for your help.
Here is the jsfiddle (which is the base code without any attempt at centering).
<div class="row">
<div class="square small-6 columns">
ABC
</div>
<div class="square small-6 columns">
DEF
</div>
</div>
<div class="row">
<div class="square small-6 columns">
123
</div>
<div class="square small-6 columns">
456
</div>
</div>
.square {
border: solid blue 1px;
padding-bottom: 30%;
}
For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc.
Well, the nested flex grid actually works:
.square {
border: solid blue 1px;
padding-bottom: 30%;
display: flex; /* new */
justify-content: center; /* new */
align-items: center; /* new */
}
It centers the content both vertically and horizontally.
The problem is that the boxes don't have any height. There's no space for the content to move vertically. What looks like height is actually padding, and that's outside the content box.
This is what the layout looks like without the padding-bottom: 30%: DEMO 1
Then add the nested flex container: DEMO 2
Then give the box some height: DEMO 3
Per the CSS Box Model, text goes in the content box. The padding is generally a content-free zone.
Here you go
li {
width:50%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
That is it, does the trick. Responsive etc.
Link
http://codepen.io/damianocel/pen/WrMmGe
You can do this with Foundation 6 (with Flex-Grid) only too.
The trick is to attach both align-spaced and align-middle to the outer row.
<div class="row align-spaced align-middle">
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>ABC</span>
</div>
</div>
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>DEF</span>
</div>
</div>
</div>
<div class="row align-spaced align-middle">
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>123</span>
</div>
</div>
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>456</span>
</div>
</div>
</div>
<style>
.square {
border: solid blue 1px;
height: 30vh;
}
</style>
as #michael-b points, the height is important.
Also, you can cut off one div layer if you do not need the blue line.
<div class="row align-spaced align-middle" style="height: 100px;">
<div class="small-6 row align-center">
<span>...</span>
</div>
</div>