在div中水平对齐元素

Question

我正在尝试将div中的三个元素对齐，以使图像与h1内联，而p标签位于h1标签下方。

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

 <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> 

这是供参考的图像： 这是元素必须排列的方式

这是当前元素的外观： 这是网页的屏幕截图

任何帮助，将不胜感激。

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的类值基于引导程序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/