Question

我有一堆图像和文字并排，两者都在var arr: [[String]] = [["Florida", "US"], ["New York", "US"], ["Georgia", "US"]] // A simple map() would always be O(n) arr = arr.map{$0 == ["Florida", "US"] ? ["Maine", "US"] : $0 } // Finding the element's index would be O(n/2) on average if let index = arr.index(where: {$0 == ["Florida", "US"]}) { arr[index] = ["Maine", "US"] }的div中。 This is how it looks now。我需要垂直居中对齐图像旁边的文本（例如float:right）。我怎么做？请建议。

Text Answer

示例CSS

<div id="content">Content here</div>
        <div id="navbar">
          <br>
          <div id ="quesBuilderText">Question Builder</div> <br>
          <div id = "textImage"> <img id="textImg"/></div>
          <div id = "textText"> Text Answers </div>
          <br> <br> <br>
          <div id = "multipleChoiceImage"> <img id="multipleChoiceImg"/></div>
          <div id = "multipleChoiceText"> Multiple Choice </div>
          <br> <br> <br>
          <div id = "dropdownImage"> <img id="dropdownImg"/></div>
          <div id = "dropdownText"> Dropdown </div>
</div>
</div>

Answer 1

您可以按照以下方式执行此操作。关键部分是#navbar>div的CSS规则，但请注意我删除了很多其他设置，并为所有三个文本（而不是ID）添加了一个类.textText：

＆＃13;

#navbar {
  float: right;
  width: 30%;
}

.textText {
  margin-left: 10px;
}

#quesBuilderText {
  margin-bottom: 20px;
  font-weight: bold;
}

#navbar>div {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<div id="content">Content here</div>
<div id="navbar">
  <br>
  <div id="quesBuilderText">Question Builder</div> <br>
  <div id="textImage"> <img src="http://placehold.it/40x30/fb7" id="textImg" /></div>
  <div class="textText"> Text Answers </div>
  <br> <br> <br>
  <div id="multipleChoiceImage"> <img src="http://placehold.it/40x30/fb7" id="multipleChoiceImg" /></div>
  <div class="textText"> Multiple Choice </div>
  <br> <br> <br>
  <div id="dropdownImage"> <img src="http://placehold.it/40x30/fb7" id="dropdownImg" /></div>
  <div class="textText"> Dropdown </div>
</div>

＆＃13;

垂直居中对齐div中图像右侧的文本

1 个答案: