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
Related
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>
#confirm {
background-color: #FFAE00;
width:80%;
height: 5em;
margin: 0 auto;
}
<div id="confirm">
<img src="http://i.imgur.com/mdb6Noh.png">
<span>Confirm</span>
</div>
How to make this image and text center and vertical-align of div?
Use display:flex to parent div. and give justify-content: center; and align-items: center; to make them center.
#confirm {
align-items: center;
background-color: #ffae00;
display: flex;
height: 5em;
justify-content: center;
margin: 0 auto;
width: 80%;
}
<div id="confirm">
<img src="http://i.imgur.com/mdb6Noh.png">
<span>Confirm</span>
</div>
Edit:
You can use display:inline-block if you don't want to use display:flex.
#confirm {
background-color: #ffae00;
height: 5em;
margin: 0 auto;
text-align: center;
width: 80%;
}
img {
display: inline-block;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
}
<div id="confirm">
<img src="http://i.imgur.com/mdb6Noh.png">
<span>Confirm</span>
</div>
are you looking to do this:
<style>
#confirm {
background-color: #FFAE00;
width:80%;
margin: 0 auto;
}
</style>
<div id="confirm">
<div style="clear:both; margin-right:40px"><img src="http://i.imgur.com/mdb6Noh.png"></div>
<span>Confirm</span>
</div>
Please use below CSS :
#confirm {
background-color: #ffae00;
display: table;
margin: 0 auto;
}
#confirm span{
display: table-cell;
margin: 0 auto;
vertical-align: middle;
width: 80%;
}
#confirm img{
display: table-cell;
float: left;
margin-right: 20px;
}
<div id="confirm">
<img src="http://i.imgur.com/mdb6Noh.png">
<span>Confirm</span>
</div>
please use image as vertical align in middle in css rule
like
#confirm{
text-align:center;
}
#confirm img{
vertical-align:middle;
}
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
.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