如何对齐 HTML/CSS 中 "div" 旁边的文本？

Question

我已经在我的网站上放置了一张包含多种颜色的图像地图，所以我想制作一个 "div" 块，并在其旁边解释该颜色在地图上代表什么。但是，当我尝试这样做时，文本就在 "div" 下方，如下所示：

#dark_green {height: 40px;
width: 80px;
background-color: #009933; }

#light_green {height: 40px;
width: 80px;
background-color: #00ff00;
 }

#dark_red {height: 40px;
width: 80px;
background-color: #ff0000;
 }

#light_orange {height: 40px;
width: 80px;
background-color: #ff8c1a;
 }

<div id="dark_green"></div> - Dark Green
<br>
<div id="light_green"></div> - Light Green
<br>
<div id="dark_red"></div> - Dark Red
<br>
<div id="light_orange"></div> - Light Orange

如何使文本与每个 "divs" 对齐？

Answer 1

使用您在此处给我们的标记，只需将所有框显示为 inline-block。

注意：只需将使元素唯一的东西添加到id。所有其余的，对于多个元素是相同的，应该在 class 中。为什么？如果你想使盒子 - 比方说 - 20px 更宽，你现在必须编辑 每个 box-id，随着我对你的代码的改进，你只需要 编辑 class 一次就大功告成.

编辑：将您的解释包装到一个元素中，<span> 就可以了。然后你就可以为它们应用样式（位置、颜色等）。

.box {
    width: 80px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

.explanation {
    margin-left: 5px;
    vertical-align: middle;
}

#dark_green {
    background-color: #009933;
}

#light_green {
    background-color: #00ff00;
}

#dark_red {
    background-color: #ff0000;
}

#light_orange {
    background-color: #ff8c1a;
}

<div id="dark_green" class="box"></div><span class="explanation">- Dark Green</span>
<br>
<div id="light_green" class="box"></div><span class="explanation">- Light Green</span>
<br>
<div id="dark_red" class="box"></div><span class="explanation">- Dark Red</span>
<br>
<div id="light_orange" class="box"></div><span class="explanation">- Light Orange</span>

Answer 2

为我工作：

#color_box_wrapper{
  display: table;
}

#color_box, #color_text{
  display: inline-block;
  margin: 0;
}

#color_text{
  display: table-cell;
  vertical-align: middle;
}

.dark_green {
  height: 40px;
  width: 80px;
  background-color: #009933; 
}

.light_green {
  height: 40px;
  width: 80px;
  background-color: #00ff00;
}

.dark_red {
  height: 40px;
  width: 80px;
  background-color: #ff0000;
}

.light_orange {
  height: 40px;
  width: 80px;
  background-color: #ff8c1a;
}

<div id="color_box_wrapper"><div id="color_box" class="dark_green"></div><p id="color_text"> - Dark Green</p></div>
<br>
<div id="color_box_wrapper"><div id="color_box" class="light_green"></div><p id="color_text"> - Light Green</p></div>
<br>
<div id="color_box_wrapper"><div id="color_box" class="dark_red"></div><p id="color_text"> - Dark Red</p></div>
<br>
<div id="color_box_wrapper"><div id="color_box" class="light_orange"></div><p id="color_text"> - Light Orange</p></div>

https://codepen.io/TriggeredOnCode/pen/PGogEz

如何对齐 HTML/CSS 中 "div" 旁边的文本？

How to align text next to a "div" in HTML/CSS?

html

css

text-align