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/
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'm trying to create a responsive website (not using flex). I need to create a title over two display:table cells, and I'd like it to be centered. The main div holding the table is text-align:justify. Nothing I seem to do fixes it!
I've tried nearly everything I can find on the subject:
text-align:center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
just plain margin: 0 auto;
and numerous combinations of the above. The text remains stubbornly in the right corner.
HTML
<div class="row">
<div class="novel novelleft">
<div class="noveltitle">TITLE</div>
stuff
</div>
<div class="novel novelright">
more stuff
</div>
</div>
CSS
.novel {
display: table;
width: 100%;
padding: 10px;
text-align: justify;
text-align-last:left;
background-color: #fff;
}
.novelleft {
width: 40%;
display: table-cell;
vertical-align: top;
padding-left: 13%;
background-color: #fff;
}
.novelright {
width: 60%;
display: table-cell;
vertical-align: middle;
padding-right: 13%;
background-color: #fff;
}
.noveltitle {
font-family: 'Cinzel', serif;
text-align: center;
}
My apologies if that's not right, I'm new here. Thanks for any help!
EDIT
Here's what it's doing
What I want it to do
If you want use divs to simulate a table, then go all the way with it.
Use table-caption for your table's title
The left and right cells are a group, so surround both cells in a table-row and that table-row with a table-row-group
.novel {
display: table;
width: 100%;
}
.novel-caption {
display: table-caption;
caption-side: top;
text-align: center;
font-family: 'Cinzel', serif;
}
.novel-row-group {
display: table-row-group;
}
.novel-row {
display: table-row;
}
.cell {
display: table-cell;
padding: 15px;
}
.novel-row-group {
display: table-row-group;
}
.novelleft {
background-color: #bfbfbf;
width: 50%;
}
.novelright {
background-color: #404040;
color: #fff;
}
* {
box-sizing: border-box;
}
<div class="novel">
<div class="novel-caption">
TITLE
</div>
<div class="novel-row-group">
<div class="novel-row">
<div class="novelleft cell">stuff</div>
<div class="novelright cell">more stuff</div>
</div>
</div>
</div>
If you want a table with a centered caption, just use a table with a centered caption.
.novel {
width: 100%;
padding: 10px;
background-color: #fff;
}
.novelleft {
width: 40%;
vertical-align: top;
padding-left: 13%;
background-color: #fff;
}
.novelright {
width: 60%;
vertical-align: middle;
padding-right: 13%;
background-color: #fff;
}
.noveltitle {
font-family: 'Cinzel', serif;
text-align: center;
}
<table class="novel">
<caption class="noveltitle">TITLE</caption>
<tr>
<td class="novelleft">stuff</td>
<td class="novelright">more stuff</td>
</tr>
</table>
Or if you prefer not to use <table> elements, you can use use divs, but you need to keep the proper table structure:
.novel {
display: table;
width: 100%;
padding: 10px;
background-color: #fff;
}
.novelrow {
display: table-row;
}
.novelleft {
display: table-cell;
width: 40%;
vertical-align: top;
padding-left: 13%;
background-color: #fff;
}
.novelright {
display: table-cell;
width: 60%;
vertical-align: middle;
padding-right: 13%;
background-color: #fff;
}
.noveltitle {
display: table-caption;
font-family: 'Cinzel', serif;
text-align: center;
}
<div class="novel">
<div class="noveltitle">TITLE</div>
<div class="novelrow">
<div class="novelleft">stuff</div>
<div class="novelright">more stuff</div>
</div>
</div>
Though there are couple of answers that will obviously work I'd assume. I still think you should be open to using flex and then providing backward compatibility to IE with rather simpler CSS.
<div class="container">
<div class="title">
Centered Title Goal
</div>
<div class="items">
<div class="novel">
.novelLeft
</div>
<div class="novel">
.novelRight
<div>
.novelRight
</div>
</div>
</div>
</div>
CSS -
* {
box-sizing: border-box;
}
.container {
width: 100%;
border: solid 1px black;
}
.title {
width: 100%;
text-align: center;
}
.items {
width: 100%;
display: flex;
flex-direction: row;
}
.novel {
flex: 1;
display: inline-block;
width: 50%;
}
.novel:nth-child(1){
background:#404040;
}
.novel:nth-child(2){
background: #bfbfbf;
}
This will create a flexbox and as a fallback to IE where flex property doesn't work, the novelLeft and novelRight will be set to inline-block of width:50%. It's way more cleaner than doing the ancient table outlines. And as you can see, extra content on novelRight doesn't matter either.
https://jsfiddle.net/4q6f9zy7/3/
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
Problem and question
When using display: table and display: table-cell to vertical align a element, Firefox overflow the parent container width. See live demo to inspect code.
HTML
<div class="hew storeloader" href="/stores/arti-zen-eskilstuna-city">
<div class="holder hp100" style="height: 325px;">
<div class="storecontent">
<img alt="" src="/img/logo-white.svg">
<p>Arti.Zen Eskilstuna City</p>
</div>
</div>
</div>
CSS
section.stores .storeloader {
width: 47.82609%;
float: left;
margin-right: 4.34783%;
display: inline;
overflow: hidden;
background: #000;
color: #FFF;
text-align: center;
margin: 10px 0;
position: relative;
cursor: pointer;
section.stores .storeloader .holder {
width: 100%;
display: table;
}
section.stores .storeloader .holder .storecontent {
display: table-cell;
padding: 0 10px;
text-align: center;
vertical-align: middle;
text-transform: capitalize;
font-size: 20px;
}
Solved by table-layout: fixed; on the container using display: table