如何对齐元素始终居中在div，而不给它的父div的宽度？ [英] How to align an element always center in div without giving width to its parent div?

问题描述

我试图在div中的元素中心，我不给任何宽度的父div，因为它会根据屏幕大小扩展，总共有3个元素在div：

I am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :

1. 按钮


2. 标题


3. 徽标

按钮将始终向左对齐，当屏幕大小改变时标志将对齐，标题总是对齐像这样

buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this

我的代码在这里
http://jsfiddle.net/7AE7J/1/
请让我知道我在哪里错了什么css我应该申请获取元素（标题）总是对中。

My code is here http://jsfiddle.net/7AE7J/1/ please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.

HTML

<div  id="header">
     <div id="buttons">
        <a href="#" class="button_back">link 1</a>
        <a href="#" class="button_back">link 2</a>
    </div>
        <h1>Heading of the page</h1>
    <div id="logo">
        <a href="#">
           <img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
       </a>
    </div>
</div>

CSS

#header {
     background:green;
     height:44px;
    width:100% }

 #buttons {
     float: left;
     margin-top: 7px;
     }

 #buttons a {
     display: block;
     font-size: 13px;
     font-weight: bold;
     height: 30px;
     text-decoration: none;
     color:blue;
    float:left}

 #buttons a.button_back {
     margin-left: 8px;
     padding-left:10px;
     padding-top: 8px;
    padding-right:15px }

 #header h1 {
     color: #EEEEEE;
     font-size: 21px;
     padding-top: 9px ;
     margin:0 auto}

 #logo {
     float: right;
    padding-top: 9px;
     }

推荐答案

$ c> inline-block ：

You can use inline-block for this:

#header {
  text-align: center;
}

#header h1 {
  display: inline-block;
}

这篇关于如何对齐元素始终居中在div，而不给它的父div的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！