Question

这是我的代码和fiddle：

MaxOrderQuantity

.sortby {
  text-align:center;
}

.sortby span {
  float:left;
}

我尝试了<div class="sortby"> <span> Sort By </span> <form> <select> <option>I want to center </option> <option>I want to center too </option> </select> </form> </div>等的不同组合......但似乎没有任何效果

Answer 1

在表单中添加了display: inline-block;，并移除了float: left;表单span。

＆＃13;

.sortby {
  text-align: center;
}

form {
  display: inline-block;
}

＆＃13;

<div class="sortby">
  <span> Sort By  </span>
  <form>
    <select>
<option>I want to center </option>
<option>I want to center too </option>
</select>
  </form>
</div>

＆＃13;

Answer 2

这是你修复

.sortby {
  text-align:center;
}

.sortby span {
text-align:center;
}

<div class="sortby">
<span> Sort By  </span>
<form>
<select>
<option>I want to center </option>
<option>I want to center too </option>
</select>
</form>
</div>

Answer 3

将display:inline-block;属性设为<form>并将float:left;移至<span>

Answer 4

试试这个：

＆＃13;

.sortby {
  text-align:center;
}

form {
  display:inline-block;
}

＆＃13;

<div class="sortby">
<span> Sort By  </span>
<form>
<select>
<option>I want to center </option>
<option>I want to center too </option>
</select>
</form>
</div>

＆＃13;

Answer 5

我认为你最好在这里改变你的css代码以使div标签居中

.sortby {
  text-align:center;
  position: relative;
}

如果你想要中心，跨度也会将代码更改为

.sortby span{
 text-align:center
}

如何居中<form>和<span>？

5 个答案: