如何定位div而不是里面的文字?

时间:2017-04-24 20:47:31

标签: html css twitter-bootstrap-3

我想将我的div'Test'与文本Discover对齐。使用此代码,这是div(也就是.test)中的文本,它是对齐的,而不是div。我能怎么做 ?

编辑:我已添加了CSS,因此您可以看到我的意思

谢谢

.button_cta {
  height: 90px;
  display: table;
  color: white;
  table-layout: fixed;
  border-color: #FFFFFF;
  background-color: #18C8D2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

        <section id ="ca" class="col-md-12">
          <div class="container">
            <header class="row">
              <div class="section_title col-lg-12 col-sm-12 col-sm-12">
                <h1>Ça avance</h1>
                <hr class="divider_blue">
              </div>
            </header>

            <div class="row">
              <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
                <p>This is it !</p>
              </div>
            </div>

            <div class="ca-img">
              <img class="ca--img"src="<?php echo get_template_directory_uri(); ?>/images/ca-img.png" width="" height="" alt="" />
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-10 col-md-9 col-lg-8 quote">
                <div class="row">
                  <div class="col-md-10 col-md-offset-2">
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</h2>
                  </div>
                </div>
              </div>
            </div>
            <div class="row ca-next">
              <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                <a href="#">DISCVOER &#8594;</a>
              </div>
            </div>
            <div class="row">
              <a href="#">
              <div class="col-xs-12 col-sm-12 col-md-6 col-xl-12 button_cta">
                <p>Test</p>
              </div>
            </div>
            </div>
          </div>
        </section>

1 个答案:

答案 0 :(得分:0)

我找到了一个解决方案,将div嵌套在另一行中。谢谢

  <div class="col-md-12">
<div class="row">
  <a href="#">
  <div class="col-xs-12 col-sm-12 col-md-6 col-xl-12 button_cta">
    <p>Test</p>
  </div>
</div>