Question

我希望能够使下拉列表居中对齐以匹配居中对齐的按钮。有什么想法可以使用.css做到这一点吗？

<h4 id="carbCount" class="pageElement">The Carb Count is 0</h4><br />
<div class="pageElement">
  <select id="foodList">
    <option value="100">Potatoes (100)</option>
    <option value="15">Bagel (15)</option>
    <option value="7.5">Oats (7.5)</option>
    <option value="45">Baguette (45)</option>
  </select>
</div>

Answer 1

在没有看到其余代码的情况下，很难说选择是否与您的其他按钮对齐。但是，通常有两种居中对齐方式：使用margin:0 auto;或使用text-align:center;。为此，我使用了text-align:center;。我将标题和列表居中。如果您只想使列表居中，请使用列表id foodList来应用文本对齐。

编辑：如果您使用的是display:flex;，则可以使用

.pageElement{
   align-items: center;
   justify-content: center;
}

居中。这也可以。

希望这会有所帮助。

.pageElement{text-align:center;}

<h4 id="carbCount" class="pageElement">The Carb Count is 0</h4><br />
    <div class="pageElement">
        <select id="foodList">
            <option value="100">Potatoes (100)</option>
            <option value="15">Bagel (15)</option>
            <option value="7.5">Oats (7.5)</option>
            <option value="45">Baguette (45)</option>
        </select>
  </div>

Answer 2

就像您可以在@RachelGallen的答案中看到的那样，您可以像她一样将整个下拉列表居中。

如果要在下拉菜单中将元素居中，则需要使用自定义下拉菜单方法。（因为标准下拉列表是由操作系统完成的，因此您无法将其中的文本对齐（据我所知）

这将是一种快速的自定义方法：（编辑：带有摘录）

.dropdown {
  text-align: center;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px 15px;
  z-index: 1;
  min-width: 100%;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content p {
  text-align: center;
}

<body>

<h2>Hoverable Centered Dropdown</h2>
<p>Move the mouse over the text to open dropdown content.</p>

<div class="dropdown">
  <p>Mouse over me</p>
  <div class="dropdown-content">
  <p>Hello World!</p>
  <p>Another One!</p>
  </div>
</div>

</body>

Answer 3

您可以将整个内容对齐到中心

body{
  text-align:center
}

<h4 id="carbCount" class="pageElement">The Carb Count is 0</h4><br />
    <div class="pageElement">
        <select id="foodList">
            <option value="100">Potatoes (100)</option>
            <option value="15">Bagel (15)</option>
            <option value="7.5">Oats (7.5)</option>
            <option value="45">Baguette (45)</option>
        </select>
  </div>

https://jsfiddle.net/axq2oen7/

如何居中对齐下拉列表

3 个答案: