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

Question

這是我的代碼和fiddle：

.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>

我試過的left:50%,transform:translate(-50%), display:inline,block, margin: auto等不同的組合。但似乎沒有任何工作

Answer 1

新增display: inline-block;的形式和去除float: left;形式span。

.sortby { 
 
    text-align: center; 
 
} 
 

 
form { 
 
    display: inline-block; 
 
}

<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 2

設置display:inline-block;屬性<form>和刪除float:left;到<span>

Answer 3

試試這個：

.sortby { 
 
    text-align:center; 
 
} 
 

 
form { 
 
    display:inline-block; 
 
}

<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 4

這裏是你解決

.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 5

我想你最好在這裏改變你的CSS代碼中心div標籤

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

，如果你想中心的跨度也將代碼更改爲

.sortby span{ 
text-align:center 
}