CODEWITHSUNDEEP
htmlcss
user3075987
user3075987

Reputation: 881

How can I center the copyright and also image using css?

I'd like to center my copyright and also the logo (Windows Logo). How can I center these on the page using CSS. I thought I had the correct CSS, but it's still showing on the left.

Check out my jsfiddle.

Jsfiddle: http://jsfiddle.net/huskydawgs/z9j9rsz2/27/

Here's my code:

<div class="topbar">


  <div id="logo">
    <img src="http://fc01.deviantart.net/fs71/f/2012/048/4/0/microsoft_windows_8_logo_by_pooterman-d4q0ub4.png" />
  </div>

Copyright © 2014 Microsoft

Here's my css:

.topbar {
    width: 100%;
    background: #f66511;
    height: 34px;
    line-height: 1;
}
.copyright{
    color:#232323;
    font-size:11px;
    margin: 0 auto;
    position: absolute;
    top: 18px;
    text-align: center;
    }

Upvotes: -1

Views: 1015

Answers (6)

Allan
Allan

Reputation: 261

I corrected your DOM implementation and CSS.

here is the JSFiddle

http://jsfiddle.net/z9j9rsz2/43/1

CSS

.topbar {
    width: 100%;
    background: #f66511;
    height: 34px;
    text-align: center;
}
.copyright{
    color:#232323;
    font-size:11px;
    line-height: 32px;
}
#logo {
    margin: 0px auto;
    display: block;
}

HTML

<div class="topbar">
    <span class="copyright">Copyright &copy; 2014 Microsoft</span>
</div>
<img src="http://fc01.deviantart.net/fs71/f/2012/048/4/0/microsoft_windows_8_logo_by_pooterman-d4q0ub4.png" id="logo" />

Upvotes: 0

AJFarkas
AJFarkas

Reputation: 3149

No problem, just use translate and absolute positioning: 

img{
  position: absolute;
  left: 50%;  
  transform: translate(-50%, 0);
}

What's happening here is that your image starts halfway into the screen (left: 50%). The trouble is that then the image is too far right, so you translate it back 50% (which refers to the width of the element).

You can use this to center on the vertical axis as well, with top: 50% and translate(x, -50%)

This codepen has more than you need, but you can see the translation at work in .loading.

Upvotes: 0

bkny139
bkny139

Reputation: 1

If you want to use the position:absolute for the .copyright then give the div a width of 100%. For the image, set it to display block and give it a margin: 0 auto.

#logo img {
display:block;
margin: 0 auto;
}
.copyright{
color:#232323;
font-size:11px;
margin: 0 auto;
position: absolute;
top: 18px;
text-align: center;
width:100%
}

Here is a an updated fiddle

Upvotes: 0

Tortus
Tortus

Reputation: 151

You cannot have automatic margins with an absolute position.

If you are trying to position your copyright, you should actually use a top margin.

It could look something like this:

    .copyright{
        color:#232323;
        font-size:11px;
        margin: 18px auto 0 auto;
        position: relative;
        text-align: center;
    }

Hope this helps!

Upvotes: 1

Steven Laidlaw
Steven Laidlaw

Reputation: 450

For the copyright just add width:100%;. You need this because you've set the element to be absolute, so you have to define the width if you want the text alignment attribute to work.

For the image just add another text-align attribute:

#logo {
    text-align:center;
}

Upvotes: 3

Morklympious
Morklympious

Reputation: 1095

First, get rid of position: absolute, if you want the copyright notice in the top bar, then nest it in the appropriate parent element. you'll want to nest it in 'topbar'.

I've messed with your jsFiddle to include the correct behavior.

Basically, removing the absolute positioning and specifying the topBar to have a text-align: center property will center all child text elements, in this case, your copyright.

For the image I just made it display: block and gave it a margin of margin: 0 auto; which centers the image within its parent container.

Upvotes: 1

Related Questions