CODEWITHSUNDEEP
htmlcss
Niklas Rosencrantz
Niklas Rosencrantz

Reputation: 26652

Centering some content with CSS

I want to center the map, the logo and the button so that content is centered under the top bar.

enter image description here

I tried in various ways but it shrinks the map if I make a div. The following is the HTML, SVG data excluded. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Free classifieds</title><link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="/static/india_files/index_in.css?234" rel="stylesheet" type="text/css">   
    <link rel="stylesheet" type="text/css" href="/static/usa.css?{{VERSION}}" />

</head>

<body>


<div class="topbar">
        <div class="topbar-inner nohistory">
            <div class="topbar-left">
            <a class="topbar-new" href="https://www.koolbusiness.com/account/create"><strong>New!</strong> All your ads and saved searches in one place, create an account today!</a>

            </div>
            <div class="topbar-right">
                <a class="topbar-login last" href="/login" title="Login to your account" rel="nofollow">
                        <i class="sprite_common_topbar_log-in topbar-float_left"></i>


                        {% if loggedin %}<a href="/logout">{% trans %}Log out{% endtrans %}{% else %}<a href="/login">{% trans %}Log in{% endtrans %}{% endif %}




                    </a>
                    <a class="topbar-create first" href="/create/" title="Create your account" rel="nofollow">  
                        <i class="sprite_common_topbar_logged-in topbar-float_left"></i>
                        {% if loggedin %}{{user.name}}{% else %}<a href="/create/">{% trans %}Create account{% endtrans %}</a>{% endif %}



                    </a>

            </div>
        </div>
    </div>


<div onselectstart="return false;" class="unselectable" >
<div id="wrapper">

<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">hipheap.com - The right choice for buying &amp; selling in usa</h1>



    <div id="post">
 <a href="/ai" id="ad">Post your ad for free</a>

</div>


    <!-- map code -->
    <div id="map_base">

    <span class="tip" id="tip"></span>

<!-- the svg code starts here -->
<svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1080 720" xml:space="preserve">

<g id="shadow">
    ...
</g>
</svg>
</div>
<div class="clear"></div>

</div>
</div>

</body>
</html>

The CSS is too large to fit in an SO question but is avilable from the link and of course it won't help creating a fiddle with the problem since a fiddle with the problem doesn't display the problem:

http://jsfiddle.net/niklasro/yyPsW/

What can be done? I just want to do something very simple, centering apiece of content, and all these frameworks and cSS and pointless modularizations have made it impossible to do something simple.

Update

I tried using margin: 0 auto; on the div but it's not working since CSS makes it impossible to do something simple.

Upvotes: 2

Views: 106

Answers (3)

Joseph Myers
Joseph Myers

Reputation: 6552

This is a hack, but like you said, the code and CSS are hard-wired to make the map have a big margin on the right. Margin auto doesn't work because that extra margin takes up the whole page, and making it narrower only shrinks the map.

You can experiment with relative positioning, however, to make it move to the center without shrinking the map.

E.g.,

<div id="wrapper" style="position: relative; left: 33%">

When I changed only that in your code, it looks approximately right to me.

For a better answer, I would have to figure out a way to make the map stop scaling. Right now its size is proportional to the width of the wrapper block, which is hard-wired to 1400px right now. If I change that width, then the map shrinks, like you say.

Upvotes: 1

Rob R
Rob R

Reputation: 1161

Well, yours is a little more complicated than that.

First, for your:

<div id="wrapper">

Add in:

margin: 0 auto;

This will center your elements within that wrapper, yes. However you've also got some absolute positioning set up on your:

 <div id="post">

that you need to remove. Otherwise your button won't align.

Then for your map, you are using an SVG graphic. So you have to add another CSS property:

for your: 

 <div id="map_base">

add in: 

 margin: 0 auto;

then for your svg graphic, you need to add in:

 margin-left: 25%;

Upvotes: 0

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Wrap your logo, map and button into a <div> and then style it with margin: 0 auto;

margin: 0 auto is a trick that centers the content into the middle of the page!

Upvotes: 0

Related Questions