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水平对齐

Answer 1

尝试这样的类名称，如col-md-pull-4到col-md-pull-8＆amp; 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>

将div标题的内容水平对齐

3 个答案: