vertical-align:middle property is not working in span element. I have tried to place the text center- and middle-aligned in span element. I have tried the following code:
span {
text-align: center;
vertical-align: middle; /* Not working */
height: 150px;
width: 150px;
border: 1px solid black;
display: block;
}
<span>center</span>
You can use display: flex to achieve this.
span {
height: 150px;
width: 150px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
<span>center</span>
vertical-align: middle will not work with display: block
You have many options for this. I have provided 3 examples:
With line-height property(in this case u specify line-height same as height):
.line-height-center {
display: inline-block;
line-height: 150px;
}
With display: table:
.table-center {
display: inline-table;
}
.table-center span {
display: table-cell;
}
With display: inline-flex;:
.flex-center {
display: inline-flex;
align-items: center;
justify-content: center;
}
span {
text-align: center;
vertical-align: middle; /* Not working */
height: 150px;
width: 150px;
border: 1px solid black;
}
.line-height-center {
display: inline-block;
line-height: 150px;
}
.table-center {
display: inline-table;
}
.table-center span {
display: table-cell;
}
.flex-center {
display: inline-flex;
align-items: center;
justify-content: center;
}
<p>With line height property:</p>
<span class="line-height-center">center</span>
<p>With display table:</p>
<span class="table-center"><span>center</span></span>
<p>With display flex:</p>
<span class="flex-center">center</span>
set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being half the known height of the child.
You are using display: block; Display block has a box behaviour.
But you trying to run a text behaviour.
If you have a known height you can use just the line height.
If height for example is 150px:
line-height: calc(150px - 15px);
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>
I have a design below which I am trying to replicate in HTML/CSS:
The above design has 2 boxes with text "Icon" at the center of each.
At this moment, I am able to get this in fiddle with text "icon" not at the center of a box.
The HTML and CSS codes which I have used to get that box and the text "icon" are:
HTML code:
<div class="squares">
<div class="icon1">
<p>Icon</p>
</div>
<div class="icon2">
<p>Icon</p>
</div>
</div>
CSS code:
.icon1,
.icon2 {
width: 200px;
height: 200px;
display: inline-block;
background: #F5F8FA;
}
.icon1 {
margin-right: 10%;
border-style: ridge;
}
.icon2 {
margin-left: 10%;
border-style: ridge;
}
I think I have to put display: flex; align-items: center; justify-content: center; to make icon text come at the center of a box but unfortunately its not working for some reasons:
.icon1 {
margin-right: 10%;
border-style: ridge;
display: flex;
align-items: center;
justify-content: center;
}
.icon2 {
margin-left: 10%;
border-style: ridge;
display: flex;
align-items: center;
justify-content: center;
}
You have a contradiction in there: You set display to inline-block for both, then in the following rules you set it to flex, which overwrites the inline-block setting, so the squares won't be displayed next ot each other.
Apply display: flex to the parent (.squares) and erase the inline-block setting:
.squares {
display: flex;
justify-content: center;
}
.icon1,
.icon2 {
width: 200px;
height: 200px;
background: #F5F8FA;
}
.icon1 {
margin-right: 10%;
border-style: ridge;
display: flex;
align-items: center;
justify-content: center;
}
.icon2 {
border-style: ridge;
display: flex;
align-items: center;
justify-content: center;
}
<div class="squares">
<div class="icon1">
<p>Icon</p>
</div>
<div class="icon2">
<p>Icon</p>
</div>
</div>
you can use flex property on parent div like this, you'll get the desired outcome
.squares {
display: flex;
justify-content: center;
}
You can try
text-align: center; /* horizontal align */
display: table-cell; /*display as table cell to make possible vertical align */
vertical-align: middle;
Because you know height probably easy to make one more div inside with padding-top: 80px for example
How can i center image in any div in HTML & CSS ?
I have a nav bar that uses images as links for other pages, the nav bar is multiple divs each has an image and anther div contains a words, how can I center this img in the div
The CSS:
#Nav
{
height: 150px;
margin-top: 50px;
}
#Nav ul
{
list-style-type: none;
padding: 50px;
padding-top: 0px;
width: 100%;
}
#Nav li
{
float: left;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
margin: 30px;
}
#Nav a
{
display: inline-block;
padding: 5px;
width: 70px;
height: 100px;
color: black;
text-decoration: none;
}
#Nav a:hover
{
border: 2px solid #ddd;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba (0, 140, 186, 0.5);
}
#img img
{
align-self: middle;
width: 50px;
height: 50px;
}
#desc
{
margin-top: 15px;
text-align: center;
}
The html:
<li> <a target="_blank" href="#">
<div id="img"> <img src="C:/Users/hp1/Desktop/Website/Pictures/Accessories.jpg" alt="Accessories">
<div id="desc"> Accessories </div>
</div>
</a> </li>
You need to change your CSS for image like below:-
#img img
{
display: block;
margin: 0 auto;
}
You can see Many Demos Here-
Note that align-self is for elements inside a flexbox container which is not your case, you can try with text-align: center; on img.
Or if you wish to go full flexbox, set the img container to:
.containerClass {
display: flex;
flex-flow: column wrap;
justify-content: center;
}
With this setup align-self on the img is not need since justify-content on it's container will do.
Flexbox to the rescue:
.parent {
width:200px; height:200px;
border:2px solid #000;
display: flex; /* Make it flex */
flex-direction: column; /* wrap children elements to columns */
align-items: center; /* Center children horizontally */
justify-content: center; /* Center children vertically */
}
<div class="parent ">
<img src="http://placehold.it/100x100/cf5">
<p>Green-ish</p>
</div>
<div class="parent ">
<img src="http://placehold.it/100x100/5fc">
<p>Blue-ish</p>
</div>
align-self: center; is valid, align-self: middle; is not valid.
However, you can probably achieve what you're wanting with text-align: center;. Despite it being an image, you can still center using text-align as images are, by default, inline elements just like text.
#img img
{
align-self: center;
width: 50px;
height: 50px;
}
OR
#img img
{
text-align: center;
width: 50px;
height: 50px;
}
First you have to change the nature of div to table then make its align to center like this
#img img
{
display:table;
align: center;
width: 50px;
height: 50px;
}
I'm having an issue on my project where the content is not aligning vertically in the flexbox. We have a fluid responsive page that needs to center all items within the flexbox via %'s. in the example below we've set a fixed pixel height just so you can play with it.
I have tried a ton of different methods for hours..
body{
margin:0px auto;
}
/* top bar navigation */
.topBoxNav {
background:red;
padding: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
width: 100%;
height: 50px;
color: white;
font-weight: bold;
font-family: 'League Gothic';
font-size: 1.5em;
text-align: center;
}
.topBoxNav li {
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: 100%;
}
.topBoxNav a {
text-decoration: none;
color: white;
}
HTML:
<nav class="" alt="top Nav">
<ul class="topBoxNav">
<li>Box1</li>
<li>Box2</li>
<li>Box3</li>
</ul>
</nav>
example:
http://codepen.io/anon/pen/iwDdy
First, realize that the one that has the display: flex property is your ul, not your li elements, so you have two options here:
1) Give your li elements display: flex and add align-items: center to it and justify-content: center
You will get something like this:
.topBoxNav li {
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: 100%;
display: flex;
align-items center
-moz-align-items center
-ms-flex-align center
-webkit-align-items center
justify-content center
-moz-justify-content center
-ms-flex-pack center
-webkit-justify-content center
}
2) Give your li elements line-height equal to the height, in this case 50px and vertical-align: middle.
You will have something like this:
.topBoxNav li {
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: 100%;
align-items: center;
-webkit-align-items: center;
vertical-align: middle;
line-height: 50px;
}
Both ways will work :)
I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items.
Example
HTML:
<div class="inner">
<div class="section green">
<img src="http://i.imgur.com/hEOMgVf.png">
</div>
<div class="section red">
<img src="http://i.imgur.com/nEybO1g.png">
</div>
</div>
CSS:
.inner {
float: left;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
}
.section {
float: left;
flex: 1;
}
.green { background-color: #7dc242; }
.red { background-color: #ed1c24; }
My issue is that I need to set the height of both 'section' divs to the same as well as centering them vertically and horizontally. You can see in the JSFiddle below that the green background isn't the same height as the red. How can I make both divs the full height of the container div?
Here's a simplified JSFiddle of what I have:
http://jsfiddle.net/beK28/1/
To achieve the effect you want, you shouldn't try to do any of the alignment in the container element and instead should set .section to also be display:flex. Then you can justify and center the images correctly within the children elements.
.section {
align-items: center;
display: flex;
flex: 1;
justify-content:center;
text-align: center;
}
http://jsfiddle.net/beK28/8/
You also don't need to use float, that's the whole point of using flexible containers.
Your elements aren't stretching vertically anymore because you've set align-items: center. If you want them to be equal height, it has to be the default value of stretch. If your elements were multi-line, then you could use align-content: center instead, which will give you the effect you're looking for. For single-line flex items, it does not appear that you can have vertical centering + equal height through Flexbox alone.
http://jsfiddle.net/beK28/6/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
background-color: #343434;
text-align: center;
height: 500px;
}
Note, however, that you can have flex items with the display property of table-cell.
http://jsfiddle.net/beK28/7/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
height: 500px;
}
.section {
display: table-cell;
flex: 1;
}
I've had problems with stretch/centering before, and ended up formatting as display: table-cell:
.inner {
float: left;
width: 500px;
display: table;
background-color: #343434;
text-align: center;
}
.section {
display: table-cell;
width: 50%;
vertical-align: middle;
}