我要center the map 、 Logo 和按钮，以便内容在顶栏下方居中。
我尝试过各种方法，但如果我制作一个 div，它会缩小 map 。以下为 HTML，排除 SVG 数据。
<!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 & 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>
CSS 太大，无法解决 SO 问题，但可以从链接中获取，当然它无助于解决问题，因为解决问题不会显示问题:
http://jsfiddle.net/niklasro/yyPsW/
可以做什么？我只想做一些非常简单的事情，以一个内容为中心，所有这些框架和 cSS 以及毫无意义的模块化使得做一些简单的事情变得不可能。
更新
我尝试在 div 上使用 margin: 0 auto; 但它不起作用，因为 CSS 使它不可能做一些简单的事情。
最佳答案
这是一个 hack，但正如您所说，代码和 CSS 是硬连接的，使 map 在右侧有很大的空白。边距自动不起作用，因为额外的边距占据了整个页面，并且使其变窄只会缩小 map 。
但是，您可以尝试相对定位，使其移动到中心而不缩小 map 。
例如，
<div id="wrapper" style="position: relative; left: 33%">
当我只更改您的代码中的那个时，它对我来说看起来大致正确。
为了获得更好的答案，我必须想出一种方法让 map 停止缩放。现在它的大小与包装 block 的宽度成正比，包装 block 现在硬连接到 1400px。如果我改变那个宽度， map 就会缩小，就像你说的那样。
关于html - 使用 CSS 居中一些内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17072831/