水平对齐div标头的内容boostrap

Question

我正在尝试使用bootsrap水平对齐div标头的内容，但由于两个内容都拉到右侧，因此不能正常工作。这是我尝试

<div class = "page-header"> 
    <img class="col-md-4 col-md-pull-4" class="img-responsive" src="/resources/images/header.png"> 
    <hgroup class="col-md-4 col-md-push-4"> 
    <h1 style="color: black;">XXXX</h1> 
    <h3 style="color:black;">XX</h3> 
</hgroup> 
</div> 

请该如何调整图像和hgroup水平thesame

Answer 1

尝试这样的类名像col-md-pull-4到col-md-pull-8 & col-md-push-4到col-md-push-8

<div class="page-header row"> 
    <img class="col-md-4 col-md-push-8 img-responsive" src="/resources/images/header.png"> 
    <hgroup class="col-md-8 col-md-pull-4"> 
     <h1 style="color: black;">XXXX</h1> 
     <h3 style="color:black;">XX</h3> 
    </hgroup> 
</div> 

Answer 2

试试这个

<div class = "page-header"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <img class="img-responsive" src="/resources/images/header.png"> 
    </div> 
    <div class="col-md-4"> 
     <hgroup> 
      <h1 style="color: black;">XXXX</h1> 
      <h3 style="color:black;">XX</h3> 
     </hgroup> 
    </div> 
    </div> 
</div> 

Answer 3

试试这个代码：

<div class="page-header"> 
    <div class="col-md-4 col-md-pull-4"> 
    <img class="img-responsive" src="/resources/images/header.png"> 
    </div> 
    <hgroup class="col-md-4 col-md-push-4"> 
    <h1 style="color: black;">XXXX</h1> 
    <h3 style="color:black;">XX</h3> 
    </hgroup> 
</div>