Question

我想在包含SVG图像的范围中垂直居中一些文本。下面是我的代码片段，您可以看到文本与SVG的顶部对齐，而我希望它与中心对齐。我怎样才能做到这一点？我尝试使用vertical-align: middle;，但这没有任何区别。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
html,
body {
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
}
.bottom-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0.5%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.widgets {
  float: left;
  width: 87%;
}
#settings {
  width: 13%;
  margin-top: 5%;
}
#settings > span {
  /* Container */
  float: left;
  width: 100%;
  margin-top: 3%;
}
#settings > span > div {
  /* SVG */
  float: left;
  height: 20%;
  width: 20%;
}
#settings > span > p {
  /* Text */
  float: left;
  height: 20%;
  width: 20%;
  margin-left: 5%;
  font-size: 1.2vw;
}

＆＃13;

<div class="bottom-wrapper">
  <div class="widgets">Place Holder</div>
  <div class="widgets" id="settings">
    <span id="setting1">
            <div id="setting1-light">
                <!--?xml version="1.0" encoding="UTF-8"?-->
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" xml:space="preserve" id="settingsLight">
                    <circle id="settingsLight-oval" stroke="rgb(32, 33, 32)" stroke-width="5" fill="rgb(47, 222, 107)" cx="15" cy="15" r="12.5"></circle>
                </svg>
            </div>
            <p id="setting1-text">Setting1</p>
        </span>
    <span id="setting2">
            <div id="setting2-light">
                <!--?xml version="1.0" encoding="UTF-8"?-->
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" xml:space="preserve" id="settingsLight">
                    <circle id="settingsLight-oval" stroke="rgb(32, 33, 32)" stroke-width="5" fill="rgb(222,58,62)" cx="15" cy="15" r="12.5"></circle>
                </svg>
            </div>
            <p id="setting2-text">Setting2</p>
        </span>
  </div>
</div>

＆＃13;

Answer 1

我认为最好的方法是像你尝试的那样使用vertical-align。为此，您需要使用display: inline-block。您可以阅读有关here

的更多信息

示例：

#settings > span > div {
  /* SVG */
  display: inline-block;
  height: 20%;
  width: 20%;
  vertical-align: middle;
}
#settings > span > p {
  /* Text */
  display: inline-block;
  height: 20%;
  width: 20%;
  margin-left: 5%;
  font-size: 1.2vw;
}

Codepen：http://codepen.io/anon/pen/qbBwoL

为什么最好使用内联块？ Advantages of using display:inline-block vs float:left in CSS

Answer 2

使用line-height而不是height：

#settings > span > p {
    float: left;
    height: 20%;
    width: 20%;
    margin-left: 5%;
    font-size: 1.2vw;
    line-height: 18px;
}

Answer 3

这是一种方式： #settings＆gt;跨度 { 向左飘浮; 宽度：100％; 保证金最高限额：3％; 位置：相对; / *新* / } #settings＆gt; span＆gt; p { /* 向左飘浮; * / 身高：20％; 宽度：20％; margin-left：5％; font-size：1.2vw; 位置：绝对; / *新* / 上：23％; / *新* / 左：20％; / *新* / } DEMO

如何在跨度中垂直居中显示此文本？

3 个答案: