.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
float: right;
display: table-cell;
vertical-align: middle;
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
How do i center my div[slogan] without using negative margin/top 50%?
you don't need floats when using display: table/table-cell ... this should center the .slogan div using the table-cell layout.
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
/*float: left; NOT THIS */
width: 30px;
display: table-cell; /* THIS */
}
.slogan
{
/*float: right; NOT THIS */
display: table-cell;
vertical-align: middle;
text-align: right; /* THIS */
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
If you are looking to middle slogan vertically then please check the fiddle https://jsfiddle.net/nileshmahaja/e6byt6zt/
CSS
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
vertical-align:middle;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
display: table-cell;
vertical-align: middle;
text-align:right;
}
change your slogan class with this
.slogan {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
You should use 'margin: 0 auto ;' on the . If you want to align text inside the div you can just use 'text-align: center ;'.
Check this post click
Related
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/
I have three divs with some content. On a wide screen they are all in one row. When I resize the screen, the following happens:
Screenshot
I want the bottom div to fill the space below the top one, like this Screenshot 2. Also on small screen all three divs should stack up in one column, so adding float:right to right div doesn't work. I'm doing it for email in web Outlook, so can't use media queries.
Here's the code
div {
display: inline-block;
font-size: 50px;
text-align: center;
color: white;
border: 2px solid black;
}
div {
background: red;
margin: 10px;
}
#top {
width: auto;
display: inline-block;
vertical-align: top;
}
#bottom {
width: auto;
display: inline-block;
vertical-align: top;
}
#right {
width: auto;
height: 200px;
display: inline-block;
vertical-align: top;
}
<div id="top">111111111111111111</div>
<div id="right">2222</div>
<div id="bottom">333333333333333</div>
Will be thankful for some advice on this situation.
Method1) use of % :
1) you must use of % instead of px for width and margin, for example:
div {
width: 30%;
//Other css...
}
2) use of word-break: break-all;
3) I remove width of ids and margin:10px(you can use of % for margin,i remove it because display:inline-block insert a margin automatically)
div {
display: inline-block;
font-size: 50px;
text-align: center;
color: white;
border: 2px solid black;
background: red;
width: 30%;
word-break: break-all;
}
#top {
display: inline-block;
vertical-align: top;
}
#bottom {
display: inline-block;
vertical-align: top;
}
#right {
height: 200px;
display: inline-block;
vertical-align: top;
}
<div id="top">111111111111111111</div>
<div id="right">2222</div>
<div id="bottom">333333333333333</div>
Method2) use of flex :
.wrapper {
display: flex;
flex-wrap: wrap;
}
div:not(.wrapper) {
font-size: 50px;
text-align: center;
color: white;
border: 2px solid black;
background: red;
word-break: break-all;
flex-grow: 1;
}
#top {
vertical-align: top;
}
#bottom {
vertical-align: top;
}
#right {
height: 200px;
vertical-align: top;
}
<div class="wrapper">
<div id="top">111111111111111111</div>
<div id="right">2222</div>
<div id="bottom">333333333333333</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
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
I have a list of divs like a menu and I want to center the spans inside them. It works if they are not floated, but once I float them, it won't center the spans anymore. Any idea why and how to solve this?
#panel {
display: table-cell;
vertical-align: middle;
width: 40%;
float: left;
background-color: yellow;
height: 80px;
}
span {
background-color: green;
}
<div id="panel"><span>Some caption </span>
</div>
<div id="panel"><span>Some caption </span>
</div>
Try like this: demo
CSS:
#panel {
display: block;
width: 40%;
float: left;
background-color: yellow;
height: 80px;
line-height: 80px;
vertical-align: middle;
/* tall height for emphasis */
}
span {
background-color: green;
display: table-cell;
vertical-align: middle;
}
UPDATE: If you dont need full height, you can use like this: Demo
CSS:
#panel {
display: block;
width: 40%;
float: left;
background-color: yellow;
height: 80px;
line-height: 80px;
vertical-align: middle;
/* tall height for emphasis */
}
span {
background-color: green;
display: inline-block;
vertical-align: middle;
line-height:30px;
}
#panel {
display: table-cell;
vertical-align: middle;
width: 40%;
float: left;
background-color: yellow;
height: 80px;
/* tall height for emphasis */
}
span {
float:left;
margin-top:13%;
background-color: green;
}
<div id="panel"><span>Some caption </span>
</div>
<div id="panel"><span>Some caption </span>
</div>