Question

我正在尝试使用html，css和bootstrap创建一个响应式网页。

如何相对于图像位置居中文字？图片必须位于文字的左侧。

以下是一些代码：

    <div class="col-xs-1" style="background-color: black;">
                    <div>
                        <img style="float: left;" src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" class="" />
                        <div>
                            Hello World!
                        </div>
                </div>
</div>

Answer 1

父元素为col-xs-1，短于其子内容。
将父元素大小增加到类似col-xs-4的内容，并调整为您的利益。
同样正如Micheal指出的那样，避免浮动图像，在flexbox建议下面：

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xs-4" style="background-color: black;">
  <div class="imgCont">
    <img src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" class="" />
    <div>
      Hello World!
    </div>
  </div>
</div>

如果您仍希望使用float下面的代码段（使用line-height进行文字垂直居中）：

.text {
  line-height: 65px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xs-4" style="background-color: black;">
  <div>
    <img style="float: left;" src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" class="" />
    <div class="text">
      Hello World!
    </div>
  </div>
</div>

Answer 2

尽量不使用内联样式
col-xs-1太小，使用col-xs-4或col-xs-6或col-xs-12？

.mycontainer {
  background-color: black;
}

.myimg {
  vertical-align: middle
}

.mytext {
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-xs-4 mycontainer">
  <div>
    <img style="vertical-align:middle" src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" />
    <span class="mytext">
      Hello World!
    </span>
  </div>
</div>

Answer 3

不要浮动图像，并将.text-center添加到父级。您可能还想使用更宽的列类，因此它在小视口中不会那么狭窄。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-xs-1" style="background-color: black;">
  <div class="text-center">
    <img src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" class="" />
    <div>
      Hello World!
    </div>
  </div>
</div>

＆＃13;

如何对齐要显示在父图像中间的文本？

3 个答案: