Html 对齐响应式 div 中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15583430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning a responsive div center
提问by Jess McKenzie
Within the structure below what is the best way to be able to align the div#logointo the middle of the grid_12 visiblediv for only non mobile devices.
在下面的结构中，只有非移动设备才能div#logo将grid_12 visiblediv对齐到div中间的最佳方法是什么。
Can I create a custom piece of code to override the above classes?
我可以创建一段自定义代码来覆盖上述类吗？
I have created a Plunker with my code - http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DS
我用我的代码创建了一个 Plunker - http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DS
HTML:
HTML：
<header class="row visible">
<div class="grid_12 visible">
<div class="row logo-wrap">
<!-- logo -->
<div class="grid_6">
<div id="logo">
<a href="http://dev.jzm.co.nz/mytime/"><img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles" /></a>
</div>
</div>
<!-- search -->
<div class="grid_6 visible">
<div id="search">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
</div><!--/search-->
</div>
</div><!--/row-->
</div><!--/grid_12-->
</header><!--End Header-->
采纳答案by Lucky Soni
Give the div with the id of logo a width and set its margin-left and margin-right css properties to auto.. also setting a max-width to 100% will ensure the responsive behaviour..
给带有标识标识的 div 一个宽度，并将其 margin-left 和 margin-right css 属性设置为 auto.. 还将 max-width 设置为 100% 将确保响应行为..
#logo{
width: 100%;
max-width: 300px; /* Original width of the logo image */
margin-left: auto;
margin-right: auto;
text-align: center;
float: left;
}
and i hope you have already done this but..
我希望你已经这样做了，但是..
#logo img{
max-width: 100%;
height: auto;
}
UPDATE:
更新：
Modify your markup like so
像这样修改你的标记
<div id="container-top">
<div id="logo">
<a href="http://dev.jzm.co.nz/mytime/"><img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles"></a>
</div>
<!-- search -->
<div id="search" class="visible">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';">
</div>
<!--/search-->
</div>
#container-top{
position: relative;
}
#search{
top: 15%;
right: 0;
}
But then you'll have to use media queries to adjust your #search css as layout changes.. Also i have made some CSS changes above (before update section)..
但是，随着布局更改，您将不得不使用媒体查询来调整 #search css .. 另外我在上面做了一些 CSS 更改（在更新部分之前）。
回答by Akshaya Raghuvanshi
Only you have to write one line margin: 0 auto;
只需要写一行 margin: 0 auto;
#logo
{
margin:0 auto;
}
