For some reason, I cannot center the .logo class with CSS.
I've tried margin:0px auto.
Am I overlooking something?
Thanks.
CSS:
.full {
width: 100%;
height: auto;
float: left;
clear: none;
position: relative;
display: block;
}
.logo {
width: 230px;
height: 117px;
float: left;
clear: none;
position: relative;
display: block;
margin: 10px auto 15px auto;
padding: 0;
}
HTML:
<div class="full">
<figure class="logo"></figure>
<figure class="x-button"></figure>
</div>
Remove the following:
.logo {
float: left;
}
You cannot directly center a floated element via margin:0px auto;. If you want an element to be floated and center, you can always apply the margin to the parent while the child itself keeps the float. An example of this can be seen here.
Keep in mind, if it is just text you are trying to center, you can always just use: text-align:center;
Remove float: left; for .logo. float: left makes it align to the left.
Click here for a demo fiddle.
At least in this case, you can not center a floated element horizontally.
Here is a minimal example: http://jsfiddle.net/tJ5N3/
You can remove the floating, as others said above.
Also, as a workaround, you can wrap your element with a div that is horizontally centered. In this case, your can keep your floating, if it is necessary.
Related
My footer and its content do not re-position proportional to each other when I reduce the height of the footer.
CSS code:
#footer {
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right;
height: 5px;
}
#footer p.left {
float: left;
text-align: left;
margin-left: 5px;
}
#footer p.right {
float: right;
text-align: right;
margin-right: 5px;
}
And this is what I am getting:
Anything I should do to resolve this?
Remove height and add overflow: hidden:
#footer
{
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
overflow: hidden;
}
<div style="clear:both;"></div>
just before footer div ends and also try removing height from footer
Well, you're not adding any context and any HTML markup. But this is important:
#footer {
clear: right; /* why are you doing this? **/
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right; /* why are you doing this? **/
height: 5px;
}
take a look at those commented lines, which quite probably you don't need at all.
Now, into your issue, you can use two options:
1) clear floats by using the "clearfix" method: simply add an empty div that clears the floats of preceding elements, like this:
<div class="clearfix"></div>
and then in CSS:
.clearfix{clear:both; float:none;}
Obviously you can use this as many times as you want since you're using re-usable classes.
The option 2 is as follows:
#footer p.right:after {content:'';clear:both; float:none; }
What we do here is to add some "empty" content, yet we assign it a "clear:both" property to clear everything, more or less as if we have added that div in option 1
Of course option 1 is way better, but well, there you go
You're using float to position elements, which means that the height of the floated elements are set to 0, just like if you're using positioning: absolute. DON'T use floats! Use flex.
#footer {
background: #d1dceb;
padding: 20px;
width: 70%;
display: flex;
margin: 0 auto; /* center element */
}
#footer p {
flex: 1 1 auto; /* fill up the entire available space */
}
#footer p.right {
text-align: right;
}
<div id="footer">
<p>Left footer element</p>
<p class="right">Right footer element</p>
</div>
I'm having trouble because I have a div I want to center and what I have
usually been told to do is this:
width: 700px;
margin-left: auto;
margin-right: auto;
the trouble is, this is for if you want the div to be a fixed width. I want the div
to adjust its size based on the text in the div, and still be centered. I tried:
width: auto;
margin-left: auto;
margin-right: auto;
but this didn't work. It stretches the div to fill up the screen when I do this.
Anyone know what to do here?
for parent block or body - text-align:center;
for centerd block- display:inline-block;
.center {
display: inline-block;
background: red;
}
body {
text-align: center;
}
<div class="center">
<p contenteditable="true"> write text </p>
</div>
DEMO http://jsfiddle.net/RXP4F/
Content Editable MDN
have you tried the approach shown here?
http://www.tightcss.com/centering/center_variable_width.htm
basically.
put your content inside a floated div
put that floated div within another floated div
put left: 50%, position relative on outer div
put left: -50%, position relative on inner div
finally, nest everything in one more div with overflow:hidden
.outermost-div{
background-color: blue;
overflow:hidden;
}
.inner-div{
float:left;
left:50%;
background-color: yellow;
position: relative;
}
.centerthisdiv {
position:relative;
left: -50%;
background-color: green;
float:right;
width:auto;
}
here is my jsfiddle demonstration:
http://jsfiddle.net/wbhyX/1/
Use margin:
0px auto; and display: table;
There are example:
https://jsfiddle.net/da8p4zdr/
You might want to try CSS display:table-cell or display:table
Try this structure.
<div class="container">
<div class="center_div">
</div>
</div>
.container{
float: left;
left: 50%;
position: relative;
}
.center_div{
position: relative;
left: -50%;
float: left;
}
zloctb's answer on Aug 30 '13 at 4:14 actually worked in principle but was incomplete. If you want your element width to be 'auto' based on the contents within it AND centered within its parent BUT with the contents inside the CHILD element left-aligned, do the following (because it really is the simplest way):
.parent {
width: 100%;
text-align: center;
}
.parent div.child {
display: inline-block;
text-align: left;
width: auto;
}
(Obviously, if you just wanted everything strictly centered, you would not need the code for the child element.)
EDITED:
use table, it could be easier to style. Then add div into the tr
.outer-container {
position: relative;
left: 50%;
float: left;
clear: both;
margin: 10px 0;
text-align: left;
}
.inner-container {
background: red;
position: relative;
left: -50%;
text-align: left;
}
Centering an element horizontally can get a little weird, as the functionality isn't very intuitive. Really, you need to play games with text-align:center; and margin:auto, and you'll need to know when to use which.
For example, if I want to center the contents of an element (raw-text), including buttons and inputs, I can use text-align:center.
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>
If we add other elements to our container, those elements will have their width forced to 100%. This helps us emulate that it is centered because technically, at 100%, it is centered! Silly, isn't it?
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
<p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>
If your width property IS defined though, then you can use the margin: auto style to center it within the parent.
<div style="margin:auto;border:1px solid black;width:300px;" >
I am centered!
</div>
You need to determine which solution is best for you. I wish I could help more, but it is hard to know what solution will best fit your needs when you haven't provided the HTML for you problem!
Either way, I hope this JSFiddle helps clear things up!
when i want to float a child div to left or right inside the centered parent div, the whole design goes left or right, depending on the float. So, how to float a child div and make the centered parent div in the center.
HTML:
<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>
CSS:
#parent{
padding: 0 auto;
width: 600px;
}
#child-left{
float: left;
width: 300px;
}
#child-right{
float: right;
width: 300px;
}
Why does parent div go left/right, and doesn't stay in center? And how to make it to stay in center?
See the demo
#parent{
padding: 0px, auto;
width: 605px;
height:200px;
border:solid 1px #f00;
}
#child-left{
float: left;
width: 300px;
height:200px;
border:solid 1px #0F0;
}
#child-right{
float: right;
width: 300px;
height:200px;
border:solid 1px #00F;
}
For parent div you use this css code
margin:0 auto;
width:980px;
and for child u use this code for float
float:right or left;
width:anypx;
best regards
To center the parent element, use margin: 0 auto;
#parent{
margin: 0 auto;
width: 600px;
}
There are also lots of spelling mistakes in your code (chile not child), and missing > symbols, fix them before you continue
A working JSFiddle (Click me)
I have the following code:
<div id="ftr_btm">
<div id="ftr_ctr">
<div class="hdr_lnk">
<ul>
<li><a>Test1</a></li>
<li><a>Test2</a></li>
<li><a>Test3</a></li>
</ul>
</div>
</div>
</div>
and the following CSS:
#ftr_ctr {display: block; text-align: center; font-size:0.8em; position: absolute; height: 24px;margin: auto;}
.hdr_lnk ul li {
display: inline;
float: left;
padding: 0;
position: relative;
}
What I am trying to do is have the text (address links) appear horizontally centered with margins to each side of the UL's. It's not working and the text and UL's all goes to the left as in this:
fiddle
Is there anyone who could tell me how I can get the UL's to appear in the middle of the page.
thanks
I'm not quite sure of the context that you're putting that code in, but this should achieve the effect you want:
#ftr_ctr {
width: 100%;
text-align: center;
font-size:0.8em;
position: absolute;
height: 24px;
}
.hdr_lnk ul{
margin: auto;
}
.hdr_lnk li {
display: inline;
padding: 0;
}
The main things you needed were the width: 100%; rule in the #ftr_ctr element and the margin: auto; rule in the .hdr_lnk ul rule. (The width doesn't have to be 100%, but it needed to be set to stop the element from shrink-wrapping its contents). margin: auto; will centre contents equally vertically or horizontally or margin: 0 auto; will centre contents horizontally.
I am trying to make a sort of progress bar that gets filled, with text inside that is on the left, in the center, and SOMETIMES on the right.
I got it (almost) working, my only issue so far is that sometimes the text in the middle gets too long, and so it gets spanned out of the div. Meaning it wraps around, and takes sort of 2 lines, but there is still place in the main div.
This is the code, maybe someone can help me fix this and improve it a little:
<div class="progress progressSize">
<div style="width: 50%;" class="progressFill"></div>
<div class="progressText">
<span class="leftText">Left Text</span>
<span class="centerText">Center text that gets too long</span>
<span class="rightText">Right Text</span>
</div>
</div>
And for the CSS:
.progress {
border: 1px solid #004b91;
background-color: #FFFFFF;
position: relative;
}
.progressSize {
width: 500px;
height: 20px;
}
.progressFill {
background-color: #EAF3FE;
height: 100%;
position: absolute;
}
.progressText {
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
position: relative;
}
.leftText {
float: left;
width: 33%;
}
.centerText {
float: left;
text-align: center;
width: 33%;
}
.rightText {
float: right;
text-align: right;
}
So my issue is with the centerText. The text in the middle is too big, so it spans 2 lines, but it's not big enough to fill the whole bar. Because I reserve 33% for each: left, center and right text, the center text is placed in the middle but it has like a "bound".
I am not sure how to fix that. Could anyone please help me?
Thank you,
Rudy
Your procressSize CSS should be:
.progressSize {
width: 500px;
min-height:20px;
height: auto;
overflow:auto;
}
This will increase the height of the progress div to contain the text
Edit but if you want the div height to remain the same, don't have the width:33% for the centerText div and keep the progressSize CSS the way i have mentioned
.progressSize {
width: 500px;
min-height:20px;
height: auto;
overflow:auto;
}
.centerText {
float: left;
text-align: center;
min-width: 33%; // initially, width:33%
height:auto;
}
The min-width is just a minimum-width so that the div does not shrink below 33% (But it will not work in IE6)
Maybe overflow:hidden in combination with height:1em would help? This will crop the text that is too long.
.centerText {
float: left;
text-align: center;
width: 33%;
overflow:hidden;
height: 1em;
}
An alternative to using float for this issue is to use absolute and relative positioning, I've found-- I'm in a situation where I need to do this without float and this has helped me solve my issue.
http://www.bennadel.com/blog/2541-most-css-floats-can-be-replaced-with-relative-and-absolute-positioning.htm