Center element vertically and new element should be added in the next line (without using <br/>)
.parent {
position: relative;
background: #FF0000;
text-align: left;
width: 100%;
height: 200px;
text-align: center;
vertical-align: middle;
}
.children {
background: #000;
width: 10%;
height: 200px;
display: inline-block;
position: relative;
vertical-align: middle;
}
Jsfiddle is in here: http://jsfiddle.net/richersoon/m8kp92yL/5/
Result should be something like this
You need to modify .parent to have a height:auto; to accommodate the height of each .children element and padding:20px 0; was added to show 20px worth of red background above the first child.
In your .children css display:inline-block was removed and margin: 0 auto allows each child to center within .parent element, after each child element margin-bottom:5px; displays the 5px gap.
.parent {
position: relative;
background: #FF0000;
text-align: left;
width: 100%;
height: auto;
text-align: center;
vertical-align: middle;
padding:20px 0px;
}
.children {
background: #000;
width: 200px;
height: 200px;
position: relative;
vertical-align: middle;
display:flex;
margin: 0 auto;
margin-bottom:5px;
}
<div class="parent">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
I would make things easy by changing the boxes to display: flex; and making the .parent class height: auto; then adding the appropriate margins and padding like so.
.parent {
position: relative;
background: #FF0000;
text-align: left;
width: 100%;
height: auto;
text-align: center;
vertical-align: middle;
padding: 5px;
}
.children {
background: #000;
width: 200px;
height: 200px;
display: flex;
position: relative;
vertical-align: middle;
margin: auto;
margin-top: 3px;
}
<div class="parent">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 1 year ago.
I have tried to using margin: 0 auto; to horizontally center the div elements however I don't understand why the items are always appearing on the left of the HTML page.
body {
background: #f06d06;
font-size: 80%;
}
main {
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
margin: 20px auto;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
}
div {
display: inline-block;
vertical-align: middle;
height: 100px;
line-height: 100px;
background-color: black;
padding: 50px;
margin: 0 auto;
}
p {
display: inline-block;
vertical-align: middle;
color: white;
margin: 0;
line-height: 1.5;
}
<body>
<main>
<div>
<p>center align</p>
</div>
</main>
</body>
Could anyone tell me what I am doing wrong?
set text-align:center to main.
main{
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
text-align:center;
}
Try This, I Changed div display properties
body {
background: #f06d06;
font-size: 80%;
}
main {
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
margin: 20px auto;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
}
div {
display: block;
vertical-align: middle;
height: 100px;
width: 100px;
line-height: 100px;
background-color: black;
padding: 50px;
margin: 0 auto;
}
p {
display: inline-block;
vertical-align: middle;
color: white;
margin: 0;
line-height: 1.5;
}
<body>
<main>
<div>
<p>center align</p>
</div>
</main>
</body>
body {
background: #f06d06;
font-size: 80%;
}
main {
display: block;
background: white;
line-height: 300px;
height: 300px;
margin: 20px auto;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
}
div {
display: block;
vertical-align: middle;
height: 100px;
width: 100px;
line-height: 100px;
background-color: black;
padding: 50px;
margin: 0 auto;
}
p {
display: block;
vertical-align: middle;
color: white;
margin: 0;
line-height: 1.5;
}
<body>
<main>
<div>
<p>Center div</p>
</div>
</main>
</body>
Okay, let me explain what is happening over here, you in your post add display inline-block which I changed to block, which means that a particular element main will take up the whole horizontal space, and when you use margin: auto it automatically gives equal margin to both sides, it is working on your code but the thing is you haven't specified the width to the max.
So, whenever you want to center the element using margin: auto, you need to specify the width as 100vh or 100%(if parent div has 100vh)
You have to implement a flexbox or Grid to achieve vertical and horizontal centering! Here I little update on you code
body {
background: #f06d06;
font-size: 80%;
}
main {
display: block;
background: white;
line-height: 300px;
height: 300px;
margin: 20px auto;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
margin:auto;
overflow:hidden;
}
div {
display: inline-block;
vertical-align: middle;
height: 100px;
line-height: 100px;
background-color: black;
margin: 0 auto;
text-align:center;
width:100%;
}
p {
display: inline-block;
vertical-align: middle;
color: white;
margin: 0;
line-height: 1.5;
text-align:center;
}
<body>
<main>
<div>
<p>center align</p>
</div>
</main>
</body>
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>
I'm attempting to vertically align 2 divs with different heights and widths, which I've horizontally centered on the page. Text-align doesn't appear to do anything, and I was hoping that there was a solution that I'm missing.
CSS
.center {
text-align: center;
}
div#map {
background: blue;
display: inline-block;
height: 250px;
margin: 10px 15px;
width: 300px;
}
div.contact {
display: inline-block;
margin: 10px 15px;
overflow: auto;
text-align: center;
width: 350px;
}
HTML
<div class="center">
<div id="map">...</div>
<div class="contact">...</div>
</div>
Just add vertical-align: middle:
div#map,
div.contact {
vertical-align: middle;
display: inline-block;
}
.center {
text-align: center;
}
div#map {
vertical-align: middle;
background: blue;
display: inline-block;
height: 250px;
margin: 10px 15px;
width: 300px;
}
div.contact {
vertical-align: middle;
display: inline-block;
background: green;
margin: 10px 15px;
overflow: auto;
text-align: center;
width: 350px;
}
<div class="center">
<div id="map">...</div>
<div class="contact">...</div>
</div>
I'd set text-align: left for the .contact div and vertical-align: middle for both (since they are inline-blocks)
http://codepen.io/anon/pen/QdNaoJ
You can use flexbox
.center {
align-items: center;
}
You can find the flexbox documentation here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
User this in your css
div#map,div.contact {
display: inline-block;
vertical-align:middle;
}
vertical-align:middle; will aling the data in middle between your div
I have 6 divs that each contain a <p> and a link, and I want them to both be centered, with the <p> at the top and the link at the bottom. This is my html (it's basically the same for all 6):
<div id="home">
<p>P</p>
<a class="nav" href="index.html">home</a>
</div>
(all 6 are wrapped in a <header>)
This is my css:
header div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
header div a {
text-decoration: none;
color: #474747;
vertical-align: bottom;
text-align: center;
display: table-cell;
}
header div p {
font-size: 60px;
padding: 0;
text-align: center;
vertical-align: top;
display: table-cell;
}
I can't get the text-align: center to work at the same time as the vertical-align. Is there anyway to get the top/bottom positioning without using vertical-align, or to get the text-align to work?
Here's the code you're looking for, I hope: (These are not the droids you're looking for)
.wrapper {
text-align: center;
height: 200px;
width: 200px;
border: 1px solid black;
display: table;
}
.container {
display: table-cell;
vertical-align: bottom;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
following Alohci's comment, if you'd like the <p> tags at the top and <a> tags at the bottom you should use the position property as follows:
.wrapper {
position: relative;
text-align: center;
height: 200px;
max-height: 200px;
width: 200px;
max-width: 200px;
border: 1px solid black;
display: table;
}
.container p {
display: inline;
vertical-align: top;
}
.container a {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
Use Following CSS,
You Can Get a <p> and a link both be at centered,
div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
div a {
text-decoration: none;
color: #474747;
vertical-align: middle;
display: table-cell;
}
div p {
font-size: 60px;
padding: 0;
text-align: center;
}
Here is the Jsfiddle solution link.
http://jsfiddle.net/rbdqtxyf/
Demo
<div class="subject" index= "0">
<span class="subject_name">FIFA</span>
<span class="subject_completion">55%</span>
</div>
.subject span
{
display: table-cell;
vertical-align: middle;
}
Why it is not vertically aligning my span div? How do i align it vertically which should not affect horizontal aligning also?
I am not preferring using top, margin-top, padding-top. I am preferring something which should work even size of my circle changes.
I am free to modify html also, but i am first preferring span instead div.
Please suggest some solutions.
You don't need any special rules at all for the spans. You can just add these three rules to the container:
.subject {
display: flex;
align-items: center;
justify-content: center;
}
.user_body_content_container
{
display: table;
}
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
display: table-cell;
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
display: flex;
align-items: center;
justify-content: center;
}
<div class="user_body_content_container">
<div class="subject_container" id="subject_container0" index="0">
<div class="subject" index= "0">
<span class="subject_name">FIFA</span>
<span class="subject_completion">55%</span>
</div>
</div>
</div>
you have too many display: table and display: table-cell for the task you're doing.
try
.user_body_content_container
{
}
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
/*display: table-cell;*/
/*remove above*/
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
display: table;
text-align: center;
}
.subject span
{
display: table-cell;
vertical-align: middle;
}
Jsfiddle
You can use following CSS classes.
.user_body_content_container
{
display: table;
}
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
display: table-cell;
position:absolute;
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
}
.subject span
{
display:block;
position: relative;
top:50%;
text-align:center;
}
So here's the solution I came up with:
css:
body, html{
margin:0; padding:0;height:100%
}
.user_body_content_container{
height:100%;
}
.subject_container{
display:table;
width:100%;
height:100%;
vertical-align:middle
}
.subject
{
display: table-cell;
vertical-align: middle;
text-align:center;}
.subject span{border:1px solid black;width:175px; display:inline-block}
/*no height given, to give it room to adjust for long texts*/
tested it with long text and short text and it appears to be working.
Note: 100% heights are required in the container `div's and body to make the page full height.
here's the codepen: http://tinyurl.com/klzknog
There are three ways for vertical align: flexbox, display: table-cell and position.
HTML
<div class="container one">
<p>I'm a text</p>
</div>
<div class="container two">
<p>I'm a text</p>
</div>
<div class="container three">
<p>I'm a text</p>
</div>
CSS (Sass)
.container {
width: 200px;
height: 200px;
border: 1px solid tomato;
float: left;
margin-right:1em;
}
.one {
display: table;
p {
display:table-cell;
vertical-align: middle;
}
}
.two {
display: flex;
align-items: center;
}
.three {
position: relative;
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
}
Demo
Add the following style to the parent class
.subject{
text-align: center;
display: table-cell;
vertical-align: middle;
}
this would align the span both horizontally and vertically