This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 6 months ago.
I'm trying to center the text in a div. With the display: flex, everything overlaps. I want to set h1, h2, p one by one (column) but no change padding-button. Someone will help?
.wrapper{
width: 50%;
padding-bottom: 50%;
border: 1px solid black;
position: relative;
}
h1, h2, p{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
<body>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, temporibus.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit</p>
</div>
</body>
Your issue was that position absolute. That was causing the overlap here is a minimal reproduceable working example you can take and edit as needed.
.wrapper{
width: 50%;
border: 1px solid black;
position: relative;
height: 700px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1, h2, p{
text-align: center;
}
<body>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, temporibus.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit</p>
</div>
</body>
Related
I am trying to recreate this card using CSS.
However I can't figure out how to create the HTML and CSS. When I create a div and give it a background cololour and relative position, the Image is getting pushed out.
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 250px;
height: 350px;
background-color: white;
}
.CardHeader {
width: 100%;
display: flex;
flex-direction: column;
}
.CardHeader div {
width: 150px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
left: -15px;
}
.CardHeader img {
width: 100px;
height: 100px;
background-color: red;
}
<div class="Card">
<div class="CardHeader">
<div></div>
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
Few things to learn:
Place the image inside the div element
Use position:absolute on the image to allow you to move the image layer
Use overflow:hidden; on the div to 'cut off' the the image so it doesn't appear outside the container.
You also don't need the extra div element inside the card header - just use the card header as the parent.
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
height: 350px;
background-color: lightgray;
border-radius:10px;
}
.CardHeader {
display: flex;
flex-direction: column;
width: 300px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.CardHeader img {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: -20%;
left: -10%;
border-radius: 50%;
}
<div class="Card">
<div class="CardHeader">
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
I have content blocks that each contain a title, an image, and copy. I need to vertically align the blocks so that the images line up any time they are in the same row.
The code below illustrates a width at which my layout breaks. I can't make the title or copy a fixed height without breaking the spacing between rows. I can't put the titles or copy in their own row because the title image and copy have to stay together as the blocks flow to new rows.
#import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.container {
font-family: 'lato', sans-serif;
max-width: 600px;
margin: 0 auto;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.block {
flex-basis: 190px;
flex-grow: 1;
}
h3 {
font-size: 20px;
letter-spacing: .5px;
text-align: center;
width: 90%;
margin: 0 auto .5em auto;
}
img {
display: block;
width: 90%;
max-width: 225px;
margin: 0 auto;
}
p {
font-size: 16px;
letter-spacing: .5px;
text-align: center;
width: 85%;
/* height: 4.75em; */
margin: .25em auto 0 auto;
<div class="container">
<div class="block">
<h3>The Title One</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
</div>
<div class="block">
<h3>The Title Two</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
<div class="block">
<h3>The Longer Title Three</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
I think align-items: center and justify-content: center will help you.
#import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.container {
font-family: 'lato', sans-serif;
max-width: 600px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.block {
flex-basis: 190px;
flex-grow: 1;
}
h3 {
font-size: 20px;
letter-spacing: .5px;
text-align: center;
width: 90%;
margin: 0 auto .5em auto;
}
img {
display: block;
width: 90%;
max-width: 225px;
margin: 0 auto;
}
p {
font-size: 16px;
letter-spacing: .5px;
text-align: center;
width: 85%;
/* height: 4.75em; */
margin: .25em auto 0 auto;
<div class="container">
<div class="block">
<h3>The Title One</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
</div>
<div class="block">
<h3>The Title Two</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
<div class="block">
<h3>The Longer Title Three</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
CSS alone can’t align the images vertically, because the individual blocks aren’t related – one title doesn’t know how tall another is. The answer above is a reasonable stab at the problem, but not very robust, as you noticed.
You could come closer if you can use CSS Grid, but then you’d lose the wrapping behaviour of the flex row.
I can’t think of anything but a JavaScript solution: figuring out which blocks are on the same row, measuring which title is the tallest, and assigning that height to the others.
Another approach could be to change the design, e.g. by moving the titles to below the images. After all, aligning these images while having titles of arbitrary lengths above them seems like a strange combination of constraints.
How could I adjust floating elements in CSS?
For the code below I got result as on attached picture.
I would like to have left and right divs aligned vertically.
* {
margin: 10px;
padding: 10px;
}
body {
background: #C0FFC0;
}
.header {
background: #C0C0FF;
height: 100px;
}
.left {
background: #FFC0C0;
float: left;
height: 200px;
width: 25%;
}
.right {
background: #FFFFC0;
overflow: hidden;
height: 200px;
}
.bottom {
background: #C0FFFF;
clear: both;
height: 100px;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Just wrap left and right divs inside another div (main) and you are good to go.
* {
margin: 10px;
padding: 10px;
}
body {
background: #C0FFC0;
}
.header {
background: #C0C0FF;
height: 100px;
}
.main {
overflow: hidden;
margin: 0px;
padding: 0px;
}
.left {
background: #FFC0C0;
float: left;
height: 200px;
width: 25%;
}
.right {
background: #FFFFC0;
height: 200px;
overflow: hidden;
}
.bottom {
background: #C0FFFF;
clear: both;
height: 100px;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="main">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
I needed to create a list with a custom list-index which is vertically centered to the content of the list items.
As I am using flex already I thought the easiest might be to give the list-item a display:flex; and style it. This works, but as soon, as the list-item contains other elements it is messed up. As you can see in the example below.
Whats the best way to vertically center the list-index?
-- Updated Example --
ol {
list-style: none;
padding: 0;
width: 200px;
}
ol > li {
display: flex;
margin-top: 20px;
align-items: center;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
flex display: block;
flex-shrink: 0;
text-align: right;
min-width: 24px;
padding-right: 5px;
}
<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
I think that the best option is to wrap all elements inside li in one other element and that should fix the problem.
ul {
list-style: none;
padding: 0;
width: 200px;
}
ul > li {
display: flex;
margin-top: 20px;
align-items: center;
}
ul > li:before {
color: red;
content: '›';
flex display: block;
flex-shrink: 0;
text-align: center;
width: 30px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>
<p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
Solution could be to use display:table, instead of flex, in this particular case.
ol {
list-style: none;
padding: 0;
width: 200px;
display:table;
border-spacing:0 20px;
}
ol > li {
display:table-row;
vertical-align:middle;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
display:table-cell;
vertical-align:middle;
text-align: right;
white-space: nowrap;
padding-right: 10px;
}
<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
Here's a method with absolute positioning to keep the arrows vertically centered.
ol {
list-style: none;
padding: 0;
width: 200px;
}
ol > li {
margin: 20px 0 0;
padding-left: 36px;
position: relative;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
font-size: 14px;
line-height: 1;
position: absolute;
left: 0;
top: 50%; /* vertically center */
margin-top: -7px; /* and shift up based on 16px height */
}
<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
Currently, I am using units: "vw" to make my textbox responsive.
First fiddle (Non-responsive): https://jsfiddle.net/jzhang172/w7yhd6xx/2/
#second{
height:635px;
background:gray;
}
#second-try{
height:635px;
}
.about-us-info {
margin: 0 auto;
width: 900px;
height: 313px;
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -450px;
top: 50%;
margin-top: -160px;
}
span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Second fiddle (Attempt at responsiveness using "vw"):https://jsfiddle.net/jzhang172/9Lagw1y6/1/
.section{
position:relative;
}
#second{
min-height:635px;
}
.about-us-info {
margin: 0 auto;
width: 46.9vw;
/* height: 16.3vw; */
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -23.4vw;
top: 50%;
margin-top: -160px;
}span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
width: 21.875vw;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
/*----Third section--------*/
#third{
min-height:488px;
background:gray;
}
#services-info{
margin-top:-125px;
border:2px solid white;
border-top:0px;
}
#services-header{
background:transparent;
color:white;
}
#services-paragraph{
color:white;
}
#services-header:before, #services-header:after {
content: "";
position: absolute;
height: 5px;
border-top: 2px solid white;
top: 19px;
width: 11.8vw;
}
#services-header:before {
right: 100%;
margin-right: .85vw;
}
#services-header:after {
left: 100%;
margin-left: .85vw;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div class="section" id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Here are some errors that I'd like to be corrected but not sure how to:
1.) Is VW being used properly here? Is there a better solution?
2.) I'd like the height of each section to expand based on the content within while maintaining a min-height of each section (635px for the first and 488 for the second) because right now when re-sizing the browser smaller, the content overlaps anything underneath it.
Is there any problem using this solution? Is there a better solution?
Is this it? If not, let me know.
body {margin: 0;}
.sections {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.sections section {
-webkit-box-flex: 1;
-webkit-flex: 1 0 50%;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sections section>div {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
padding: 35px 50px;
border:1px solid #333;
margin: 50px 0;
max-width: 50%;
box-sizing: border-box;
position: relative;
min-width: 50%;
-webkit-transition: min-width .3s ease-out;
transition: min-width .3s ease-out;
}
#second {
background-color: white;
color: #333;
}
#third >div {
border-color: white;
}
#third {
background-color: gray;
color: white;
}
.span-header {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
background-color: white;
padding: 0 1rem;
font-size: 1.8em;
text-transform: uppercase;
text-align: center;
-webkit-transition: font-size .3s ease-out;
transition: font-size .3s ease-out;
white-space: nowrap;
}
#third .span-header {
background-color: gray;
}
#media (max-width: 767px) {
.sections section>div{
min-width: 60%;
}
.sections section>div {
padding: 15px 30px;
}
.span-header {
font-size: 1.25em;
}
}
#media (max-width: 359px) {
.sections section>div{
min-width: calc(100vw - 120px);
}
.span-header {
white-space: initial;
}
}
<div class="sections">
<section id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
<section id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
</div>
Please note I've also made a few adjustments to the html markup. Cheers!
jsFiddle
Question 1
It is perfectly fine to use vw this way. Percentage widths can generally do the same things as vw, but since you have some nesting, you would have to mess with the parent's widths to make percentages work. (This use case was noted by Chris Coyier.)
The nesting I'm talking about is <div class="section">s. Since the margins on the <body element have not been reset, these sections (on some browsers) end up a little narrower than the viewport. To use percentages, you would have to do this:
/* Reset margins */
body, html {
margin: 0;
padding: 0;
}
/* Now use percentages */
.about-us-info {
width: 46.9%;
}
span.span-header {
width: 47.4%;
}
Note vw has more issues with browser support (look at the known issues tab).
Question 2
In the code given, the text boxes are using position: absolute as part of the centering. Absolute positioning takes elements out of the document flow, and that is the reason the sections are not expanding to fit the content. If you want them to expand properly, you will need to use a different centering technique.
CSS table centering (as shown in the link above) would work:
<!-- First wrap your text boxes with containers... -->
<div class="section" id="second">
<div class="container">
<div class="about-us-info">
<!-- ... -->
</div>
</div>
</div>
Then remove the current absolute-based centering on the text boxes and add the following:
/* Make the parent a table: */
.section {
display: table;
width: 100%;
}
/* Make the container a table cell and center it: */
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}