So im feeling pretty stupid that I can't figure this out but my problem is as following:
I got a footer and inside the footer I have 2 divs, 1 containing a Facebook image and 1 containing copyright text. What I want to do is float them next to each other, but align the Facebook image to the left and the text to the center.
Html:
<div id="footer">
<div id="facebook"><img src="img/FB-f-Logo__blue_29.png" alt="facebook link"></div>
<div id="footerText"><p>© Copyright 2013. All Rights reserved.</p></div>
</div>
Css:
#footer {
width: 960px;
height: 50px;
margin: 0 auto;
}
#facebook {
width: 29px;
height: 29px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
#footerText {
float:left;
font-size: 11px;
text-align: center;
margin: 20px auto 20px auto;
}
You could give both divs an additional "wrapper" within the footer: http://jsfiddle.net/y9xpA/
#wrap {width: 400px; margin: auto;}
Your text in #footerText will not be centered because #footerText doesn't have a specified width. Its width is currently auto, which is default, so it will shrink to the width of the text inside; neither text-align:center or automatic side margins will fix this, as I can see you've tried.
If you want #facebook floating all the way to the left of the footer, you can give the remaining width of the footer to #footerText:
#footerText {
float:left;
font-size: 11px;
text-align: center;
width: 931px;
margin: 20px 0;
}
You can try using absolute position to move the Facebook div out of the flow of the page and to the left, then giving the footer text a left margin equal to the facebook div's width and centering it:
#footer {
width: 960px;
height: 50px;
position: relative;
}
#facebook {
width: 29px;
height: 29px;
position: absolute;
left: 0;
}
#footerText {
font-size: 11px;
text-align: center;
margin: 20px auto 20px 29px;
}
Demo
It'd be much, much easier to just give the #footer a text-align:center and set the other elements inside it to display:inline. Check out a demo: http://jsfiddle.net/pUKwJ/
#facebook:
{
display: inline-block;
text-align: center;
}
#footer-text
{
display: inline-block;
text-align: center;
vertical-align: center;
}
Related
I'm running into an issue where if I add an image as a sibling to an element then that element will shift over to accommodate the inserted image. What I want is the element to stay horizontally centered even if the image is inserted. Here is a picture of the issue:
Each row is its own div with a p element and an optional image, which is the red explanation point. I want the p element with text "Corrupted" to stay horizontally aligned even with the inserted sibling.
Here is my CSS:
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
}
#friendsList div p{
display: inline;
}
The inserted image has css like this:
#friendsList div img {
margin-bottom: 5px,
float: right,
vertical-align:middle
}
Is there a way to have the p element stay horizontally aligned even when it has a sibling?
EDIT*** Here is a CSSdeck example: http://cssdeck.com/labs/2uel0ogm
The following possibilities come to my mind:
Add the image as background image and use background-position.
Apply position: relative to the div and something like position: absolute; right: 5px; top: 5px; to the image. This makes the image absolutely positioned within the div as container.
Place image left to the p tag and give float: right to the img.
see the example
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
background: orange;
border: 1px solid red;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
float: right;
height: 25px;
width: 25px;
margin-left: -25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
Alternative solution(using position property)
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table;
width: 100%;
background: orange;
border: 1px solid red;
position: relative;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
position: absolute;
right: 0;
height: 25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
Hi I'd like to center my menu bar and haven't had any luck, below is the css coding
#menubar
width:940px;
height:50px;
float:left;
text-align:center;
You tried using text-align: center; which aligns content of your element in the center.
If you want to center your element with respect to its container (which may be the body of your page or another element), you can do this:
#menubar {
width: 940px;
height: 50px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
text-align: center;
}
by setting left and right margins to auto you are instructing the browser to give an equal value, thus centering it.
Please update your css by this
#menubar {
width: 940px;
height: 50px;
text-align:center;
margin: 0 auto;
}
<div id="menubar"></div>
explainmehow.com
The white boxes in the middle of the screen, which have text in them, are not centered. You can see it extra clear, if you make your screen really small.
White box:
.step {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
color: #303030;
display: block;
float: left;
}
Change width: 100%; to width: 90%; so you aren't extending the page by adding margin-right/left:5% and set padding:15px; to padding: 15px 0; so only top and bottom gets padding:
#contentholder {
background-color: #eeeeee;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 90%;
}
Then:
Get rid of float:left on the class .step. Boom it is all centered.
The CSS of the main content div is this:
#contentholder {
background-color: #EEEEEE;
padding: 15px;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 100%;
}
Take a look at the box model. The width, padding, and margin together make it so that the total width of the element is larger than the width of the screen. The white boxes inside that element are centered properly though.
So, the problem isn't the white boxes, the problem is the parent element.
I have a problem creating a decent header in CSS. What I want is a <h1> header that aligns its content in the center of its parent <div>. Sometimes though there might be an additional logo displayed as a regular <img /> which should be aligned to the left.
This is my example code:
<div class="container">
<div class="logo">
<img src="http://www.oldfirestation.co.uk/logo_brand_example_86.jpg" />
<h1>Not center?</h1>
</div>
<div class="more">
This is the center
</div>
</div>
And my CSS:
body {
background-color: #161616;
}
div.container {
background-color: #fff;
width: 70%;
margin: auto;
}
div.logo img {
width: 200px;
float: left;
}
h1 {
text-align: center;
font-size: 1.4em;
margin: 0px auto;
padding: 0px 0px 5px 0px;
width: 50%;
}
div.more {
text-align: center;
margin-top: 50px;
clear: left;
}
The problem is that when I show an <img />, my <h1> text is NOT centered. If I remove this <img /> it is... How can I fix it??
I have made an example on JSFiddle here: http://jsfiddle.net/8B9ZF/
You do like this:
div.logo img {
width: 200px;
vertical-align:middle;
}
h1 {
text-align: center;
font-size: 1.4em;
margin: 0px auto;
padding: 0px 0px 5px 0px;
width: 50%;
display:inline-block;
}
http://jsfiddle.net/8B9ZF/8/
May be you can change your mark-up
http://jsfiddle.net/8B9ZF/24/
If you make the image absolutely positioned at 0,0 instead of floating it then it won't push the H1 out of center alingment. But you then run the danger of the image overlapping the text if the image is too wide, or the container of the heading too small. To counter this, you probably want to add some padding to the left/right of the container
http://jsfiddle.net/8B9ZF/27/
this should always work as far as i know! basically this just adds overflow hidden, which makes the h1 aware of the space taken by the floated element so it takes up the remaining area!
body {
background-color: #161616;
}
div.container {
background-color: #fff;
width: 70%;
margin: auto;
}
div.logo{
overflow:hidden
}
div.logo img {
width: 200px;
float: left;
}
h1 {
text-align: center;
font-size: 1.4em;
padding: 0px 0px 5px 0px;
}
div.more {
text-align: center;
margin-top: 50px;
clear: left;
}
This is the HTML layout:
<div class="wrap">
<div id="container">
<div id="left">...</div>
<div id="right">...</div>
</div>
</div>
I used the float: left to the left div, and float: right to the right div. Then, I used the padding-top: 10px to the container. Why doesn't it work? thank you.
This is my first style:
.wrap {
float: left;
width: 1000px
}
#container{
background-color: #FFFFFF;
padding: 10px 10px 0;
width: 980px;
float: left;
}
#left {
float: left;
width: 670px;
}
#right {
float: right;
width: 300px;
}
Example here.
When you float an element, it's effectively taking it out of the document flow, so adding padding to its parent won't have an effect on it. You could use margin-top: 10px; on both of your inner divs.
Put right floated div just before the float left div
Instead of using float, use flex and justify the contents to be space-between
#container{
background-color: #FFFFFF;
padding: 10px 10px 0;
width: 980px;
display: flex;
justify-contents: space-between;
}