Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Karol Zientek
Karol Zientek
2,006 Points
Posted by Karol Zientek
Karol Zientek
2,006 Points

Problem with centering an image!

Hi!

I have been writing a page for a while, but I have noticed a small problem I want to fix. On the menu page I have written I put an image on that site, and I put two country flags which will be supposed to redirect a user to the site with a different language.

That's my code:

<body>


    <div id="page">
    <ul id="icons">
        <li><object type="image/svg+xml" data="images/pl.svg"></object></li>
        <li><object type="image/svg+xml" data="images/gb.svg"></object></li>
    </ul>

    <img src="images/ryszard_final.png" alt="Ryszard Kukliński Logo" />

    <div id="buttons_div">

        <a href="biografia.html" class="btn1 btn1_float">BIOGRAFIA</a>
        <a href="#" class="btn1 btn2_float">RECENZJA</a>

        <div style="clear: both;"></div>

        <a href="#" class="btn1 btn1_float">O PROJEKCIE</a>
        <a href="#" class="btn1 btn2_float">KOMIKS</a>

    </div>


    </div>





</body>

/******************
GENERAL
******************/

body {
    background-color: #1f1f2e;
    color: white;

    margin: 0;
    padding: 0;

    font-size: 100%;
    font-family: 'Lato', sans-serif;
}
img {
    max-width: 100%;
}
a {
    text-decoration: none;
    color: white;
}

/******************
MENU PAGE
******************/
img {
    display: block;
    margin: 0 auto;

    height: 20%;
    width: 20%;
    margin-bottom: 5%;
    margin-top: 5px;
}
.btn1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;

    text-align: center;
    height: 15%;
    width: 40%;
    border-radius: 10px;
    line-height: 70px;
    cursor: pointer;

    border: 3px solid #a20000;
    display: block;

    position: relative;
    overflow: hidden;
    background: transparent;
    transition: 0.3s;

    margin-bottom: 15%;


}
.btn1:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #e60000;
    opacity: .5;
    top: -100%;
    left: 0;
    z-index: -1;
    transition: 0.3s;
}
.btn1:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #e60000;
    top: -100%;
    left: 0;
    z-index: -1;
    transition: 0.3s;
    transition-delay: 0.2s;
}
.btn1:hover {
    color: #fff;
}
.btn1:hover:before {
    top: 0;
}
.btn1:hover:after {
    top: 0;
}

.btn1_float {
    float: left;
}
.btn2_float {
    float: right;
}

#icons {
    list-style: none;

    margin: 0;
    padding: 0;
    float: right;

    margin-top: 10px;
    margin-right: 5px;
}
#icons li {
    display: inline-block;
}
object {
    height: 16px;
    width: 32px;

}

The problem is that the photo, I mean the logo is not actually at a center, I think it is the margin of the country flags and they just push a logo to the left.

That's the photo without country flags: http://imgur.com/4ltd8Ii as you see here the logo is perfectly in the middle.

That's the photo with country flags: http://imgur.com/a/NlK6I here the photo is a little bit to the left, and I need to solve it, please.

If anyone knows how to do it, then reply to this post, please.

1 Answer

Mike Wagner
Mike Wagner
23,559 Points
Mike Wagner
Mike Wagner
23,559 Points

It's a bit dirty, but you could apply a margin-right: -20px; (or whatever amount offsets the flag value and centers the image like you want. You would do this on the img selector of your CSS. Since you only have one img on the page at the moment, it will work. If you intend to add more images later on, I would recommend giving the existing image tag a class, or even an ID since it is the only one that will exist, then write the selector with the margin property for that class/ID.

*** Edit *** Adding the following to your icons ID seems to do the trick. 

#icons {
  position: absolute;
  right: 0;
}

Again, it's a bit of a hack, but I wasn't going to try and find a better way since this worked and was easy to achieve. The odd behavior seems to stem from the img's auto left-right margin and the way you've structured your html/css regardinig both the img and #icon otherwise. Sorry my first attempt fell flat.

Karol Zientek
Karol Zientek
2,006 Points
Karol Zientek
Karol Zientek
2,006 Points

It doesn't work bro. Giving the value of margin-right: -20px; makes the image floating to the right. Check this photo: http://imgur.com/a/6J97D

As you see it doesn't work well.

Mike Wagner
Mike Wagner
23,559 Points

Karol Zientek - I've updated my answer with a fix that seems to work for your needs.