Question

我试图在div中对齐三个元素，使得图像与h1内联，而p标记在h1标记下面。

＆＃13;

.valign{
  position:relative;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: middle;
  }
.banner{
  position: relative;
  height: 100vh;
  width:100vw;
  background: #eee;
}

＆＃13;

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12">
    <div class="banner" style="display:flex">
      <div class="container">
        <div class="valign">
          <img src="img/logo.png" style="height: 150px;width: 150px">
          <h1>Anirudh Sharma</h1>
          <p>This is my portfolio</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

以下是供参考的图片： This is how the elements must be arranged

这就是元素现在的样子： This is a screenshot of the webpage

任何帮助都将不胜感激。

Answer 1

试试这个html

 <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="banner" style="display:flex">
                  <div class="container">
                    <div class="valign">
                        <div style="float:left">
                        <img src="img/logo.png" style="height: 150px;width: 150px"></div>
                        <div style="float:left">
                        <h1>Anirudh Sharma</h1>
                        <p>This is my portfolio</p></div>
                    </div>
                  </div>
            </div>
        </div>
    </div>

Answer 2

试试这个

 <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="banner" style="display:flex">
              <div class="container">
                <div class="valign">
                    <div class="float-xs-left float-sm-left float-md-left">
                    <img src="img/logo.png"></div>
                    <div class="float-xs-left float-sm-left float-md-left">
                    <h1>Anirudh Sharma</h1>
                    <p>This is my portfolio</p></div>
                </div>
              </div>
        </div>
    </div>
</div>

float的类值基于bootstrap 4

Answer 3

使用浮动，Bootstrap提供pull-left和pull-right帮助程序类，因此在布局的两个部分上使用它来逐个使用它们。

您需要在此处添加一些边距以使其看起来很好。

  <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="banner" style="display:flex">
                  <div class="container">
                    <div class="valign">
                        <div class="row">
                            <div class="pull-left">
                                <img src="img/logo.png" style="height: 150px;width: 150px">
                            </div>
                            <div class="pull-left">
                                <h1>Anirudh Sharma</h1>
                                <p>This is my portfolio</p>
                            </div>
                        </div>
                    </div>
                  </div>
            </div>
        </div>
    </div>

https://jsfiddle.net/n8o1w3cq/

水平对齐div中的元素

3 个答案: