Here is the jsfiddle.
HTML:
<div class="main">
<div class="div1"></div>
Center with Red!
</div>
CSS:
.main{
height: 50px;
width: 100%;
background-color: #000000;
text-align: center;
color: #ffffff;
line-height: 50px;
font-size: 24px;
}
.div1{
display: inline-block;
width: 50px;
height: 50px;
background-color: #ff0000;
}
The red div and text are centered. But why line-height does not work. The text is not centered vertically. I think the reason might be the line-height not work in linear layout, but the parent div is block layout. How to center the red div and text both vertically and horizontally. The Text might be changed, so I do not want set them absolute position and use code like:
margin-left: -25px;
margin-top: -25px;
left: 50%;
top: 50%;
Thanks for the help!
You can simple add vertical-align: top to .div1:
.main {
height: 50px;
width: 100%;
background-color: #000000;
text-align: center;
color: #ffffff;
line-height: 50px;
font-size: 24px;
}
.div1 {
display: inline-block;
width: 50px;
height: 50px;
background-color: #ff0000;
vertical-align: top;
}
<div class="main">
<div class="div1"></div>
Center with Red!
</div>
Edit after #chead24 comment.
Related
I'm trying to align circles in the center on mobile. Here is what I've used on https://www.wmhi.com.au/elite-edge-leadership-resilience/
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
.circle:hover {
background-color:#79c852;
color:white;
}
I need to keep the texts as laid there now (inline-block). The circles are appearing left aligned on mobile phones. Any help would be highly appreciated.
Thanks in advance :)
Kindly change your CSS from
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
to this
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: block;
padding-top: 10px;
margin: auto;
}
And it will work perfectly fine. I just made these elements block give them an auto margin and give some top padding to the text.
try following code for good design some change for good design please add one div for all content vertically center when you add one line code or more than large content set vertically center also your circle center in mobile.
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: table;
margin: 0 auto;
}
.vertical-center {
display: table-cell;
vertical-align: middle;
}
.circle h2 {
margin-top: 0;
margin-bottom: 15px;
}
.circle p {
margin: 0;
}
.circle:hover {
background-color:#79c852;
color:white;
}
<div class="wpb_wrapper">
<div class="circle">
<div class="vertical-center">
<h2 class="w-h2">
<span style="color: #ffffff;">Step 3</span>
</h2>
<p>Run the popular Elite Edge training</p>
</div>
</div>
</div>
add the div before the circle class. like this and it will resolve the problem
<style>
.divCenter{margin:0 auto;text-align:center;}
</style>
<div style="margin:0 auto;text-align:center;">
<div class="circle">
<h2><span style="color: #ffffff;">Step 1</span></h2>
<p>Tell us your team’s resilience and leadership goals</p>
</div>
How do I make the height of text(tagline) responsive?
I tried padding bottom, but it doesn't work. Is there a way I can make the text's height responsive?
<p class="logo">LoremIpsum</p>
<p class="tagline">LoremIpsum</p>
<img class="mainImage" src="FullSizeRender.jpg">
css:
body{
background-color: black;
margin: 0;
}
.logo{
font-size: 3em;
color: white;
text-align: center;
}
.tagline{
font-size: 0.9em;
color: white;
text-align: center;
position: absolute;
top:20%;
/* padding-bottom: 20%;*/
}
.mainImage{
width: 50%;
height: auto;
}
Try putting the <p> inside a <div> or <span> and assigning the height values to them.
I'm trying to create a fluid layout, but have a small problem with the height of the container. The outer <div> (yellow, ip_A-1) is not adjusting to the height of it's children.
See a fiddle here.
I've tried placing a spacer inside but it's not working. Also making ip_BA_1 and ip_BB_1 position:relative does nothing.
The HTML:
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
<div class="spacer_0"></div>
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
The CSS:
.spacer_0 {
clear:both;
width:100%;
height:0px;
}
.ip_A_1 {
position: relative;
width: 100%;
height: auto;
min-height: 28px;
text-align: left;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size:1em;
background: yellow;
}
.ip_BA_1 {
float: left;
width: auto;
padding: 4px 10px 20px 45px;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size: 0.88889em;
line-height: 0.88889em;
font-weight: bold;
background: blue;
color: white;
}
.ip_BB_1 {
clear: both;
float: left;
margin-top: -15px;
width: 100%;
}
.ip_BBA_1 {
position: absolute;
left: 30px;
right: 0px;
padding-left: 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ccc;
border: 1px solid #666;
}
The problem is that you are using floats and position:absolute; on the children these rules prevent the children from expanding parents height.
change the ip_BBA_1 css position:relative.
I'm trying to create a box containing a picture on the top and two buttons at the bottom. The two buttons have to stay inline and centered (at least horizontally).
This is the HTML code:
<div id="box1">
<p>Text Text Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="popinfo2">
<div>
<img src="http://imageenvision.com/450/18963-sweaty-woman-skipping-or-dancing-during-cardio-exercise-at-the-gym-clipart-by-djart.jpg">
</div>
<div>
<ul>
<li>P</li>
<li>P</li>
</ul>
</div>
</div>
and this the CSS:
body{
background: sandybrown;
height: 300px;
width: 90%;
}
#box1{
position: relative;
background: mediumseagreen;
padding: 0; margin: 0;
width: 60%;
height: 100%;
float: left;
}
#popinfo2{
position: relative;
background: plum;
height: 100%;
width: 40%;
float: left;
}
#popinfo2 div{
position: relative;
background: lightseagreen;
padding: 0;
display: block;
margin: auto;
vertical-align: middle;
}
#popinfo2 div:first-of-type{
width: 35%;
height: 75%;
}
#popinfo2 div:nth-of-type(2){
width: 100%;
height: 25%;
}
#popinfo2 div img{
background: aliceblue;
position: relative;
padding: 0; border: 0;
display : block;
margin: auto;
vertical-align: middle;
width: 100%;
height: 100%;
}
/*#popinfo2 div div{
background: dodgerblue;
height: 50%;
width: 80%;
padding: 0; margin: auto;
}*/
#popinfo2 div ul{
position: relative;
background: yellow;
float: left;
width: 100%;
height: 100%;
margin: 0; padding: 0;
text-align: center;
}
#popinfo2 div ul li {
position: relative;
float: left;
list-style: none;
position: relative;
padding: 0.5em;
margin: auto;
}
#popinfo2 div ul li a {
float: left;
padding: 0.5em 3.5em;
text-decoration: none;
color: white;
background: brown;
width: 2em;
}
The only way I found was to insert a left margin inside the li tag. I don't really like it as it takes the reason of using the percentage off.
you should use display:inline-block instead of float for <li> if you want to center horizontaly :
http://codepen.io/anon/pen/rKBeE
float kills display and send things to the extrem right or left of its container , it is not fully in the flow anymore.
Here is the DEMO
Firstly, use inline-block for the li, then text-align: center; will work.
Secondly, check your code wisely - you set float:left; to the <a> tags inside floated li's.
In my HTML I'm trying to align a Title next to the title's Bullet, so that the first line of the title always is next to the bullet, and the second line (if any) doesn't change the title's position - it just trails to the next line.
JSFiddle:
http://jsfiddle.net/Ebqq8/
HML:
<div class="bullet-container">
<div class="bullet-title-container">
<div class="circle-container">
<div class="circle"></div>
</div>
<p class="bullet-title">Short Title</p>
</div>
<div class="bullet-details-container">
<p>Body Text</p>
</div>
</div>
CSS:
.circle-container {
height: 34px;
display: inline-block;
position: relative;
width: 14px;
border: 1px solid blue;
}
.circle {
border-radius: 50% !important;
width: 12px;
height: 12px;
background-color: red;
display: inline-block;
position: absolute;
top: 0px;
/* width and height can be anything, as long as they're equal */
}
.bullet-title {
display: inline-block;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
min-height: 34px;
width: 200px;
margin: 0px;
}
.bullet-title-container {
color: black;
display: inline-block;
position: relative;
width: 250px;
}
.bullet-details-container {
color: black;
}
.bullet-container {
max-width: 600px;
float: left;
text-align: left;
}
What's happening now is that the first line is always too low, and if there are multiple lines, the whole title gets pushed up too high. I thought that aligning two inline-block elements would do the trick, but it doesn't seem to be working. What am I doing wrong?
You could try adding:
position: absolute;
top: 0;
to .bullet-title { }
http://jsfiddle.net/Ebqq8/2/