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>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I've recently started doing frontend and I've run into a bit of a problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
You can run the code here. The problem is with aligning the red buttons with the navbar (header). The buttons are supposed to stretch from the top to the bottom of the navbar, but they aren't aligned to the top. This is caused by the head-title element. If the font size is set to 1em, then the problem disappears. Why is this happening? Any help is appreciated.
Set vertical-align: top; on the .head-button:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
Try adding vertical-align: top; to .head-button class so the blocks will be aligned to top.
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
Try using display:flex css property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
align-items: center;
}
.head-title {
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
margin-right: 8px;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
</style>
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
Try to use modern solution and !coding not a property such display: inline-block or vertical-align: top that almost is old and obsolete, in this case when you want to put element side by side and align them in a certain row you can use flex on their parents like below example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
With flex you can control parent and also child alignments! something like justify-content: center; or align-items: center;
Try this
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
/** My Code **/
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
width: 260px;
height: auto;
margin: 0 10px;
vertical-align: middle;
}
.head-button {
display: inline-block;
width: 80px;
line-height: 2.5em;
background-color: red;
text-align: center;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
I'm aware of This Question and many others like it. I have reviewed several edge cases similar to mine, and none of the fixes I've tried have worked.
I have an image and text. I want the text centered below the image. What I'm getting is the paragraph always aligned to the left edge of the image and growing to the right, rather than being centered on the image such as the image below. The image itself has even-width transparent borders on each edge, the size of which you can determine by knowing the left edge of the paragraph is aligned with the left edge of the image (it's very small).
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 5vw;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
You can use margin:auto to get this fixed.
Add a class .center-items to the parent a tag of the image with the following properties :
.center-items > img,p {
display : block;
margin : auto ;
}
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 50px;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
.center-items > img,p {
display : block;
margin : auto ;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#" class="center-items">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
it may work.. plz modify the css code..
css
*,
*:after,
*:before {
margin: 0;
padding: 0;
/* Removes padding behaviour on widths */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu-card {
margin: 0px;
text-align: center;
}
Thanks to #TheVigilant for putting me on the right path:
.menu-icon-container a {
width: auto;
vertical-align: top;
display: inline-flex;
justify-content : center;
}
.menu-icon-container > img, p {
margin: auto;
display: block;
}
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>
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/