I have a div within a div that I am trying to vertically align center. I have tried vertical-align, position: relative; top: 50%, and margin: auto; to no avail. Here is the code:
.main {
font-family: "adobe-garamond-pro";
padding: 40px 0px;
color: rgba(26,26,26,0.7)
}
.intro-title {
width: 90%;
padding: 40px;
color: rgba(26,26,26,0.9);
}
.center {
margin: 0px auto;
}
.three-quarter-width {
width: 75%;
text-align: center;
}
.two-third-width {
width: 66%;
}
.half-width {
width: 50%;
}
.whitespace {
height: 7em;
}
.about {
overflow: hidden;
background-color: red;
}
.about-image {
height: auto;
float: left;
}
.about-text {
height: 100%;
float: right;
background-color: blue;
}
.inline {
display: inline;
}
.helvetica {
font-family: helvetica;
}
<div class="about three-quarter-width center">
<img src="rainbow.jpg" class="about-image half-width inline">
<div class="about-text half-width inline">
<p class="helvetica gray-spaced center">ABOUT</p>
<p class="image-text center three-quarter-width">Find out about our organization,
mission, our methods, and the results of our decades of advocacy.</p>
<p class="learn-more-button center">LEARN MORE</p>
</div>
</div>
I would like the div about-text to be vertically aligned within the div about but haven't been able to with the above methods. I'm using chrome so that might have something to do with it.
Just use css flexbox to vertical align elements.
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
/* Just for the demo */
background: red;
height: 100px;
}
.i-am-centered {
background: yellow;
}
<div class="vertical-align">
<div class="i-am-centered">
I am vertical aligned to th center
</div>
</div>
Related
I want to have a welcome page like this:
But instead I get this:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background-color: #000000;
margin: 0;
height: 90%;
width: 100%;
align-items: center;
}
#container1 {
height: 100%;
vertical-align: middle;
display: table-cell;
background-color: yellow;
display: flex;
align-items: center;
}
#left {
height: 500px;
color: white;
background-color: blue;
font-size: 20px;
float: left;
width: 100%;
}
#right {
height: 500px;
color: white;
background-color: red;
font-size: 20px;
float: left;
width: 100%;
}
<main id="container1" class="container my-6">
<div class="">
<div id="left" class="col-lg-6 my-3">
</div>
</div>
<div class="">
<div id="right" class="col-lg-6 my-3">
</div>
</div>
</main>
I don't know why my container doesn't fully fit the body of the page, and my left and right don't go in the middle and stretch width to each other's end.
You have a bunch of errors in your code. I commented out the CSS you don't need:
No need for float, that's what flex is for.
display: table-cell is being overwritten by display: flex
Use flex to set the properties of your left and right divs.
Remove the containing elements around those.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background-color: #000000;
margin: 0;
height: 90%;
width: 100%;
/* NOT NEEDED: align-items: center;*/
}
#container1 {
width: 100%;
height: 100%;
vertical-align: middle;
/* NOT NEEDED: display: table-cell; */
background-color: yellow;
display: flex;
/* This is probably unneeded. align-items, aligns elements on the cross access - which in this case would be vertically aligned in the center since flex-direction by default, is row */
align-items: center;
}
#left {
height: 500px;
color: white;
background-color: blue;
font-size: 20px;
/* NOT NEEDED float: left; */
/* NOT NEEDED width: 100%; */
flex: 1 1 50%;
}
#right {
height: 500px;
color: white;
background-color: red;
font-size: 20px;
flex: 1 1 50%;
/* NOT NEEDED float: left; */
/* NOT NEEDED width: 100%; */
}
<main id="container1" class="container my-6">
<div id="left" class="col-lg-6 my-3">
</div>
<div id="right" class="col-lg-6 my-3">
</div>
</main>
The problem comes mostly from the divs without classes, that shouldn't be there.
But you're also mixing floats, with flex and tables. Just stick with flex like in this example:
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100%;
display: flex;
}
.left,
.right {
width: 50%;
height: 100%;
}
.left {
background: #215f40;
}
.right {
background: #092414;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 6 years ago.
I want the content to be centered vertically and horizontally but it gets centered only horizontally. The problem is that I don't have fixed height.
Thank you guys for help!
html,
body {
height: 100% margin: 0;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
text-align: center;
}
<div class="content">
<h1>Welcome to the website!</h1>
</div>
You can easily center an element respect to the parent in this way (assuming that the parent has position: relative;).
In your example:
h1 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can also center it in the middle of the screen using position: fixed; instead.
Follow this code
HTML
<body >
<div class="content">
<h1>Welcome to the website!</h1>
</div>
</body>
CSS
html,body {
height : 100%;
width : 100%;
}
.content {
height : 100%;
width : 100%;
display: table;
}
h1 {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Follow this code.
body{
margin: 0;
padding: 0;
}
.content-wrapper{
background-color: #121212;
display: block;
left: 0;
height: 100%;
padding: 15px;
position: fixed;
top: 0;
width: 100%;
}
.content{
background-color: #f5f5f5;
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
.centent-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
h1{
color: #121212;
}
<div class="content-wrapper">
<div class="content">
<div class="centent-cell">
<h1>Welcome to the website!</h1>
</div>
</div>
</div>
Here's an example of what you need:
<section>
<div class="centerize">
<div class="v-center">
<div class="box">Say my name!</div>
</div>
</div>
</section>
and CSS
section {
height: 100vh;
background: #fff;
}
.centerize {
display: table;
height: 100%;
width: 100%;
}
.v-center {
display: table-cell;
vertical-align: middle
}
.box {
background: #000;
width: 10%;
margin: 0 auto;
}
I have to design a 3 columns layout with these conditions:
I don't want to use percentages
I don't care if left or right columns are made with pixels
center column has to take the remaining width
elements have to be aligned vertically
I need the spans to be 100% height of their parent, to make the hover work with a full background-color
I tried using display:flex on the main container, it works well but I can't align the elements vertically. I tried using display-table: cell and vertical-align: middle but it doesn't seem to work with flex.
I developed a jsfiddle to show you what I tried: http://jsfiddle.net/v13yy2v3/4/
html, body {
height:100%;
}
#mainPercent {
background-color: red;
width: 100%;
height: 20%;
color: white;
}
#leftPercent {
background-color: green;
float: left;
width: 5%;
height:100%;
}
#centerPercent {
background-color: blue;
text-align: center;
float: left;
width: 90%;
/* percent isn't wanted */
height:100%;
display:table;
}
#centerPercent span {
display:table-cell;
vertical-align : middle;
}
#rightPercent {
background-color: purple;
float: right;
height:100%;
width: 5%;
}
#mainFlex {
background-color: red;
width: 100%;
height: 20%;
color: white;
display:flex;
/* align-items: center;
justify-content: center; items are not 100% height */
}
#leftFlex {
background-color: green;
}
#centerFlex {
background-color: blue;
text-align: center;
flex:1;
/*display:table;*/
}
#rightFlex {
background-color: purple;
}
#mainPx {
background-color: red;
width: 100%;
height: 20%;
color: white;
}
#leftPx {
width:128px;
float:left;
background-color: green;
}
#centerPx {
background-color: blue;
text-align: center;
width:100%;
}
#rightPx {
float:right;
width : 128px;
background-color: purple;
}
<br/>
<div id="mainPercent">
<div id="leftPercent"><span>left</span>
</div>
<div id="centerPercent"><span>center</span>
</div>
<div id="rightPercent"><span>right</span>
</div>
</div>
<br/>
<br/>
<div id="mainFlex">
<div id="leftFlex"><span>left</span>
</div>
<div id="centerFlex"><span>center</span>
</div>
<div id="rightFlex"><span>right</span>
</div>
</div>
<br/>
<br/>
<div id="mainPx">
<div id="leftPx"><span>left</span>
</div>
<div id="centerPx"><span>center</span>
</div>
<div id="rightPx"><span>right</span>
</div>
</div>
You'd have to keep extending the flexbox to the child items and the spans.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#mainFlex {
background-color: red;
width: 100%;
height: 20%;
color: white;
display: flex;
justify-content: center;
}
.left {
background-color: green;
}
.center {
background-color: blue;
text-align: center;
flex: 1;
}
.right {
background-color: purple;
}
.child {
display: flex;
flex-direction: column;
}
span {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 0.25em;
flex: 1;
}
span:hover {
background: #bada55;
}
<div id="mainFlex">
<div class=" left child"><span>left</span>
</div>
<div class="center child"><span>center</span>
</div>
<div class="right child"><span>right</span>
</div>
</div>
What I'm trying to achieve:
I'm trying to position three elements alongside each other. Two content boxes with a dividing div in between. I am getting overflow problems with the right content box. It always appears below the two other divs.
It may be a problem with how the centre divider is positioned but I can't think of a better method of positioning it.
Codepen of what I currently have:
http://codepen.io/anon/pen/vNNKpB?editors=110
Here's my CSS:
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
margin-left: 49.95%;
margin-right: 49.95%;
height: 300px;
background-color: darkgray;
}
.left-contact {
width: 500px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-contact {
float: right;
width: 500px;
height: 300px;
background-color: lightgrey;
}
If you use width in % for .container you should use width in % for the child elements. Otherwise, you always will have errors on the different screen size.
The new way of the positioning you want is to use flexbox without floats:
.container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
/* ... another styles here */
}
Demo: http://codepen.io/anon/pen/RWWROr
But if you use flexbox don't forget about browser prefixes, you can get them here http://autoprefixer.github.io/
You can add another div inside the .centre-divider div which will be the vertical line, then just set a display: inline-block; on .centre-divider:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 50%;
display: inline-block;
height: 300px;
}
.centre-divider > div {
width: 1px;
height: inherit;
background: gray;
margin: 0 auto;
}
.left-box {
width: 25%;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: right;
width: 25%;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider">
<div></div>
</div>
<div class="right-box">
</div>
</div>
</div>
</body>
You will have to adjust the widths but you get the idea.
Just Add this CSS:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
float:left;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
float:left;
margin-left: 5%;
margin-right: 4%;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 400px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: left;
width: 400px;
height: 300px;
background-color: lightgrey;
}
you can use display: inline-block; instead of floating the elements. when you text-align: center on the .contact div, then the .left-box, .right-box, and .centre-divider are automatically centered in spacing (so you dont have to calculate it yourself, and it still is responsive to the width of the screen.
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
text-align: center;
}
.centre-divider {
width: 2px;;
display: inline-block;
margin-left: 50px;
margin-right: 50px;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 200px;
display: inline-block;
height: 300px;
background-color: lightgray;
}
.right-box {
display: inline-block;
width: 200px;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider"></div>
<div class="right-box">
</div>
</div>
</div>
</body>
When I view the following code I see three 25% width divs but they're all aligned left. I'm trying to center the three without setting static px sizes of the divs. The .icon-container div is rendering as width: 75% and height: 17px. Am I missing something simple?
.greybox {
width: 100%;
background-color: #a99e93;
padding: 0 5%;
margin: 0 auto 1rem auto;
}
.icon-container {
margin: 0 auto;
text-align: center;
}
.feature-icon {
width: 25%;
height: 100%;
display: inline-block;
padding-top: 2em;
padding-bottom: 2em;
}
.feature-icon img {
margin: 0 auto;
}
.feature-icon p {
font-size: 1.2rem;
color: white;
padding-top: .8em;
}
<div class="greybox">
<div class="icon-container">
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/commercial.png" style="height:128px;width:128px">
<p>Commercial</p>
</div>
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/industrial.png" style="height:128px;width:128px">
<p>Industrial</p>
</div>
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/information.png" style="height:128px;width:128px">
<p>More Information</p>
</div>
</div>
</div>
Try making these changes:
.icon-container {
margin: 0;
text-align: center;
width: 100%;
}
.feature-icon {
width: 25%;
height: 100%;
display: inline-block;
padding-top: 2em;
padding-bottom: 2em;
text-align: left;
}
Edit: The text-align: left is only required if you dont want the text center aligned
You can try this:
.icon-container {
display:table;
width:100%;
}
.feature-icon {
display:table-cell;
}