CODEWITHSUNDEEP
htmlcss
Josh Poor
Josh Poor

Reputation: 55

How to center <form> and <span>?

This is my code and 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>

I tried different combinations of left:50%,transform:translate(-50%), display:inline,block, margin: auto etc...But nothing seems to work

Upvotes: 1

Views: 333

Answers (5)

Krishna
Krishna

Reputation: 23

I think you better change your css code here for centering the div tag

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

if you want center the span also change the code to

.sortby span{
 text-align:center
}

Upvotes: 0

J. Shabu
J. Shabu

Reputation: 1053

here is you fix

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

Upvotes: 1

Ehsan
Ehsan

Reputation: 12969

Try This:

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

Upvotes: 0

Mr.Pandya
Mr.Pandya

Reputation: 2038

Set display:inline-block; property to <form> and remove float:left; to <span>

Upvotes: 0

athi
athi

Reputation: 1683

Added display: inline-block; to the form and removed float: left; form 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>

Upvotes: 2

Related Questions