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>
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'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 a parent div #allcomplex and it has multiple child divs .complexmem
Child elements of .complexmem must be in the middle but the css didn't work on them together.
I always to have one img with fixed size , another img with fixed size then a div .autotext that has a span for detail.
All of them must be set in the middle of div .complexmem, text in the span element is being resize by JavaScript code automatically.
What could be my mistake and how can I fix it?
JSFiddle link
CSS CODE:
#allcomplex>div{
margin-bottom: 10px;
display:block;
}
.complexmem{
width: 40vw;
height:10vw;
background-color: yellowgreen;
display: table-cell;
vertical-align: middle;
}
.complexmem>a>img{
width: 7vw;
height: 7vw;
background-color: red;
}
.complexmem>img{
width: 12vw;
height: 7vw;
background-color: blue;
}
.complexmem>.autotext{
width: 20vw;
height: 7vw;
display:inline;
color:white;
background-color: green;
}
HTML CODE:
<div id="allcomplex">
<div class="complexmem">
<a href="#">
<img src="http://science-all.com/images/magnifying-glass-clipart/magnifying-glass-clipart-13.jpg">
</a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Microchip_PIC24HJ32GP202.jpg/220px-Microchip_PIC24HJ32GP202.jpg">
<div class="autotext">
<span>Computer Center Complex of microchip</span>
</div>
</div>
<div class="complexmem">
<a href="#">
<img src="http://science-all.com/images/magnifying-glass-clipart/magnifying-glass-clipart-13.jpg">
</a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/PIC16CxxxWIN.JPG/220px-PIC16CxxxWIN.JPG">
<div class="autotext">
<span>Laptop Center</span>
</div>
</div>
</div>
js code for resizing text font-size of span fit to parent width:
function resizeFont(parElem, ratio) {
var parW = parElem.width();
ratio = ratio || 7;
parElem.find('span').each(function () {
console.log($(this).width());
console.log(parW);
console.log(ratio);
$(this).css('font-size',
parW / $(this).width() * ratio + 'px');
})
}
resizeFont($(".autotext"));
according to Vitorino comment
#allcomplex>div {
margin-bottom: 10px;
display: block;
}
.complexmem {
width: 40vw;
height: 10vw;
background-color: yellowgreen;
display: table-cell;
vertical-align: middle;
}
.complexmem:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.complexmem>a>img {
width: 7vw;
height: 7vw;
background-color: red;
vertical-align: middle;
}
.complexmem>img {
width: 12vw;
height: 7vw;
background-color: blue;
vertical-align: middle;
}
.complexmem>.autotext {
width: 20vw;
height: 7vw;
display: inline;
color: white;
background-color: green;
vertical-align: middle;
}
Please replace the css with the following :-
#allcomplex>div{
margin-bottom: 10px;
}
.complexmem{
width: 40vw;
height:10vw;
background-color: yellowgreen;
display: table;
}
.complexmem>a {
display: table-cell;
vertical-align: middle;
}
.complexmem>a>img{
width: 7vw;
height: 7vw;
background-color: red;
}
.complexmem>img{
width: 12vw;
height: 100%;
background-color: blue;
display: table-cell;
vertical-align: middle;
}
.complexmem>.autotext{
width: 20vw;
height: 7vw;
display: table-cell;
vertical-align: middle;
color:white;
background-color: green;
}
It may help you.
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