This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
How to vertically center text inside p? Thank you.
enter image description here
Flexbox solution - the more modern solution:
https://jsfiddle.net/2zqeL6g8/
The HTML:
<div class="todo">
<div class="todo-left">
<p>TODO 1</p>
</div>
<div class="todo-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
</div>
</div>
The CSS:
.todo {
display: flex;
}
.todo-left {
background: #ccc;
padding: 0 15px;
flex: 0 0 100px;
display: flex;
align-items: center;
}
.todo-right {
background: #f5f5f5;
padding: 0 15px;
flex: 1;
display: flex;
align-items: center;
}
CSS table solution - older method, but works in older browsers ie8+:
https://jsfiddle.net/2zqeL6g8/2/
The HTML:
<div class="todo">
<div class="todo-row">
<div class="todo-cell-left">
<p>TODO 1</p>
</div>
<div class="todo-cell-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
</div>
</div>
</div>
The CSS:
.todo {
display: table;
border-collapse: collapsed;
width: 100%;
}
.todo-row {
display: table-row;
}
.todo-cell-left,
.todo-cell-right {
display: table-cell;
vertical-align: middle;
padding: 0 15px;
}
.todo-cell-left {
background: #ccc;
width: 100px;
}
.todo-cell-right {
background: #f5f5f5;
}
.todo {
display: flex;
}
.todo-left {
background: #ccc;
padding: 0 15px;
flex: 0 0 100px;
height:100px;
display: flex;
align-items: center;
}
.todo-right {
background: #f5f5f5;
padding: 0 15px;
flex: 1;
display: flex;
align-items: center;
}
<div class="todo">
<div class="todo-left">
<p>TODO 1</p>
</div>
<div class="todo-right">
<p>Lorem ipsum dolor sit .</p>
</div>
</div>
Related
I'm trying to create a two column layout, where the second column is moved downward a bit.
Currently I create a two column layout and translateY the second column, which is odd and doesn't play nicely with flow of other elements.
Is there any way to do this in a more natural way?
* {
box-sizing: border-box;
}
main {
display: flex;
flex-wrap: wrap;
width: 12.4em;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 6em;
height: 6em;
margin: 0.1em;
background-color: black;
color: white;
}
.box:nth-of-type(2n) {
transform: translateY(50%);
}
.box--more {
cursor: pointer;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ea.</p>
<main>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box box--more">...</div>
</main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, corrupti?</p>
As #a-haworth and #paulie_d kindly mentioned, it can be solved quite easily with css-grids by filling the gap with a placeholder item:
main {
display: grid;
grid-template-columns: repeat(2, fit-content(1em));
grid-auto-rows: 1fr;
grid-gap: 0.1em;
}
main::before {
content: "";
grid-area: 1 / 2;
}
.box {
grid-row-end: span 2;
display: flex;
justify-content: center;
align-items: center;
width: 6em;
height: 6em;
background-color: black;
color: white;
}
.box--more {
cursor: pointer;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ea.</p>
<main>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box box--more">...</div>
</main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, corrupti?</p>
I want to make a child div inside parents div visible if I give the child div margin-top negative value.
I have tried with position:relative and z-index, but it doesn't seems work.
Here are my code:
HTML:
<div class="main-site">
<div class="container">
<div class="overlap top-border-radius">
<div id="facultylist">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
</div>
</div>
</div>
</div>
CSS:
#facultylist {
position: relative;
}
.main-site {
padding: 50px 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.overlap {
position: relative;
background: #fff;
margin-top: -50px;
margin-bottom: 20px;
}
.top-border-radius {
border-top: #006af4 3px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
It sounds like you're looking to remove overflow: hidden on .container:
#facultylist {
position: relative;
}
.main-site {
padding: 50px 0;
}
.container {
width: 80%;
margin: auto;
/*overflow: hidden;*/
}
.overlap {
position: relative;
background: #fff;
margin-top: -50px;
margin-bottom: 20px;
}
.top-border-radius {
border-top: #006af4 3px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
<div class="main-site">
<div class="container">
<div class="overlap top-border-radius">
<div id="facultylist">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
</div>
</div>
</div>
</div>
I want to make a flexbox grid for cards with one big image on left and two right images vertically aligned. Everything is fine and aligned for desktop at 1280px but when images stretch for responsive view, the image on the left is stretching more rapidly and cards are no more vertically aligned.
Here a codepen illustrating the problem:
https://codepen.io/actik/pen/xaZqmG
.wrap {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.flex {
display: flex;
box-sizing: border-box;
align-items: flex-start;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.structure-100 {
flex: 1 100%;
}
.structure-50 {
flex: 1 50%;
}
.content {
color: #fff;
background-color: #aa0000;
width: 100%;
flex: 1 100%;
}
.element_left {
flex: 1 50%;
padding-right: 15px;
padding-bottom: 30px;
}
.element_right {
flex: 1 50%;
padding-left: 15px;
padding-bottom: 30px;
}
.content-text {
padding: 0 10px;
}
img {
max-width: 100%;
height: auto;
align-self: center;
}
<div class="wrap">
<div class="flex row structure-100">
<div class="flex col structure-50">
<div class="flex element_left">
<div class="content">
<img src="http://www.placebacon.net/625/875/" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
<div class="flex col structure-50">
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
</div>
</div>
I made a lot of different tests and can't understand this behavior, any tips welcome, thanks for your help !
Editing : Here the version at 1280px working (title cards are aligned at the bottom) and the second version when reducing width, bottom of the 2 images and title cards are no more aligned. I want the red part add space at his bottom if necessary but keep image and title aligned.
working version
not working
Big image is squashed.
As I understood from our talk in the comments, your issue that the left section with the 'big' image (the images aren't present in the snippet you provided, they're present in the CodePen demo that tou do provided its link) isn't stretching as supposed, and that because in yourCSS you gave the .flex class a rule of align-items: flex-start; which means that the element of the flex container should be placed on the top (vertical), thus, it doesn't let the element to stretch, instead, you just have to replace this line align-items: flex-start; with align-items: stretch; in the .flex class, so that class becomes:
.flex {
display: flex;
box-sizing: border-box;
align-items: stretch;
}
And here's a runnable snippet:
$gutter: 30px;
.wrap{
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.flex {
display: flex;
box-sizing: border-box;
align-items: stretch;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.structure-100 {
flex: 1 percentage(1/1);
}
.structure-50 {
flex: 1 percentage(1/2);
}
.content {
color: #fff;
background-color: #aa0000;
width: 100%;
flex: 1 100%;
}
.element_left .content {
display: flex;
flex-flow: column wrap;
}
.element_left {
flex: 1 percentage(1/2);
padding-right: $gutter / 2;
padding-bottom: $gutter;
}
.element_right {
flex: 1 percentage(1/2);
padding-left: $gutter / 2;
padding-bottom: $gutter;
}
.content-text {
padding: 0 10px;
}
.element_left .content .content-text {
flex-grow: 0;
margin-top: auto;
}
img {
max-width: 100%;
height: auto;
}
.element_left .content img {
width: 100%;
flex-grow: 1;
align-self: flex-start;
}
<div class="wrap">
<div class="flex row structure-100">
<div class="flex col structure-50">
<div class="flex element_left">
<div class="content">
<img src="http://www.placebacon.net/625/875/" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
<div class="flex col structure-50">
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Hope I pushed you further.
I’m using Flexbox to align the height of two adjacent columns, which works. I now need to vertically center the inner content within the flex box columns without using fixed heights. Additionally this all needs to work within Bootstrap 3. Please see code below:
.row-flex,
.row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex: 0;
}
.row-flex > div[class*='col-'],
.container-flex > div[class*='col-'] {
margin: -.2px;
/* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,
.row-flex > div[class*='col-'] div {
width: 100%;
}
.flex-col {
display: flex;
display: -webkit-flex;
flex: 1 100%;
flex-flow: column nowrap;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
.content {
border: 1px solid black;
padding: 20px;
}
.content-inner {
border: black solid 1px;
padding: 20px;
}
.img {
width: 100px;
height: auto;
display: block;
margin: 0 auto;
}
figcaption {
text-align: center;
}
[class*="col-"] {
padding: 0;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-xs-7">
<div class="content">
<div class="content-inner">
<figure>
<img class="img" src="http://i80.photobucket.com/albums/j182/swiftian/headersnstuff/sidebar_zaius.jpg" alt="Macaque in the trees">
<figcaption>Dr. Zaius</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="content">
<div class="content-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
</div>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
<hr>
JS FIDDLE
https://jsfiddle.net/baydbzbn/1/
Appreciate any help.
Add this to your .content class CSS definition
display: flex;
align-items: center;
I'm trying to achieve Pinterest-like layout, but with items of different percentage widths. Expected behaviour is pretty much like Javascript masonry plugin.
My flexbox code for some reason does not nake flexbox items jump side-by-side to another, event, when exact space is available.
Illustration of what I'm trying to achieve
demo on jsfiddle
https://jsfiddle.net/31v7et9f/1/
html
<div class="masonry">
<div class="item-1-4">item 25%</div>
<div class="item-1-1">item 100%</div>
<div class="item-3-4">item 75%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-1">item 100%</div>
</div>
css
* {box-sizing: border-box;}
/* parent */
.masonry {
display: flex;
flex-flow: column;
}
/* childs */
.masonry > div {
background: gray;
outline: solid 1px black;
height: 100px;
}
/* child sizes */
.item-1-1 {width: 100%;}
.item-3-4 {width: 75%;}
.item-1-2 {width: 50%;}
.item-1-4 {width: 25%;}
Flexbox items are by default layed out in the order they appear in the html. So, using your html and using flex-flow: row wrap; you'll get your 2 50%s side by side, but not your 75% and 25%.
/* parent */
.masonry {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
You could rearrange your html (do some math in javascript to determine which order they should be in to tile).
<div class="masonry">
<div class="item-1-1">item 100%</div>
<div class="item-1-4">item 25%</div>
<div class="item-3-4">item 75%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-1">item 100%</div>
</div>
You could also use order to group items that should be able to tile, though it's not perfect
/* child sizes */
.item-1-1 {
width: 100%;
-webkit-order: 1;
order: 1;
}
.item-3-4 {
width: 75%;
-webkit-order: 2;
order: 2;
}
.item-1-2 {
width: 50%;
-webkit-order: 3;
order:3;
}
.item-1-4 {
width: 25%;
-webkit-order: 2;
order:2;
}
https://jsfiddle.net/31v7et9f/2/
We can use flex-wrap: wrap; align-items: flex-stat; in parent flex class and child we can use flex: 1 auto; so that it consider available space and align automatically.
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-stat;
}
.fill-height-or-more
div {
flex: 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.some-area
div {
padding: 1rem;
}
.some-area
div:nth-child(1) {
background: rgba(136, 204, 102, 1);
}
.some-area
div:nth-child(2) {
background: rgba(121, 181, 210, 1);
}
.some-area
div:nth-child(3) {
background: rgba(140, 191, 217, 1);
}
.some-area
div:nth-child(4) {
background: rgba(159, 202, 223, 1);
}
.some-area
div:nth-child(5) {
background: rgba(179, 213, 230, 1);
}
.some-area
div h1, .some-area
div h2 {
margin: 0 0 0.2rem 0;
}
.some-area
div p {
margin: 0;
}
html, body {
height: 100%;
}
<section class="some-area fill-height-or-more">
<div>
<h1>Boxes That Fill Height (or more)</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div>
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div>
<h2>Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div>
<h2>Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div>
<h2>Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
</section>