使用引导程序根据图像垂直对齐文本

Question

使用引导程序根据图像垂直对齐文本

我有一个图像，并希望它旁边有一个垂直居中的文本。如果水平对齐，我可以使用文本中心，但我需要垂直对齐。我怎样才能做到这一点？有没有办法在引导程序中做到这一点？

  <div class="col-md-12 well">
      <div class="col-md-3">
        <img src="http://placehold.it/100x100"></img>

      </div>
      <div class="col-md-3">
        <div>
        This text should be centered vertically
        </div>
      </div>
    </div>

Run Code Online (Sandbox Code Playgroud)

这是代码笔

Answer 1

Rya*_*tle 8

如何使用flexbox：

.well {
  display: flex;
  align-items: center;
}

Run Code Online (Sandbox Code Playgroud)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 well">
  <div class="col-md-3">
    <img src="http://placehold.it/100x100"></img>
  </div>
  <div class="col-md-3">
    <div>
      This text should be centered vertically
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

您应该能够在 IE 11 中使用它。您可能需要为 IE 10 使用前缀。尝试检查 [这篇文章](https://msdn.microsoft.com/en-us/library/hh673531(v= vs.85).aspx) (2认同)

Answer 2

Wri*_*med 5

<html><head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
<div class="row">
<div class="col-3">
    <img src="https://media.haircutinspiration.com/photos/20181204011855/boy-hairstyle-e1536810585307.jpg" class="img-fluid">
</div>
    <div class="col-3 align-self-center">
        hello hello
    </div>
 
</div>
  </body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，8 月前
查看次数：	7911 次
最近记录：	6 年，7 月前