Adding right: 50% to input tag doesn't do anything

Question

Below, the left: 50% in the css does not move the input element in any way. Anyone know why? Is this just not possible? Do I have anything blocking it? I don't want to use margins because it will look different on different computers. If left: is not possible, how can this be centered either way?

(I put the left: 50% at the bottom of css for the searchbar)

   #searchbar{
         
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
         
  color: transparent;
  background: #FFF;
  padding: 1px 1px 1px 5px;

width: 30px;
  height: 30px;
  outline: none;
  border: 1px solid #CCCCCC;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  text-align: center;
         background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Simpleicons_Interface_magnifier-1.svg/768px-Simpleicons_Interface_magnifier-1.svg.png) no-repeat scroll 0 0;
         background-size: contain;
         border:none;
right: 50% 
    
     }

 <input id = "searchbar" name = "search" size = "1" autocomplete="off" maxlength="27">

Try to ask the question again, by first, describing the problem, what you have tried and co, then let's see how we can help. We do not know what object you are to style with right:50% so rephrase the question. — Shasha, Mar 01 '20 at 04:22
@coolpigeon2122, Just add ```position: absolute;``` after ```right:50%;``` (or anywhere) inside ```#searchbar``` which would work.. — Maniraj Murugan, Mar 01 '20 at 04:31

score 1 · Accepted Answer · answered Mar 01 '20 at 04:38

Try,

 <input id = "searchbar" name = "search" size = "1" autocomplete="off" maxlength="27">

CSS

    #searchbar{
    position:absolute;
    left:50%;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    color: transparent;
    background: #FFF;
    padding: 1px 1px 1px 5px;
    width: 30px;
    height: 30px;
    outline: none;
    border: 1px solid #CCCCCC;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    text-align: center;
    background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Simpleicons_Interface_magnifier-1.svg/768px-Simpleicons_Interface_magnifier-1.svg.png) no-repeat scroll 0 0;
    background-size: contain;
    border:none;
    }

OR

    <div id="searchbardiv">
    <input id = "searchbar" name = "search" size = "1" autocomplete="off" maxlength="27">
    </div>

CSS

 #searchbardiv{
 width:100%;
 display:flex;
 position relative
 } 

 #searchbar{
 position:absolute;
 left:50%;
 border-radius: 4px;
 background-color: transparent;
 cursor: pointer;
 color: transparent;
 background: #FFF;
 padding: 1px 1px 1px 5px;
 width: 30px;
 height: 30px;
 outline: none;
 border: 1px solid #CCCCCC;
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
 text-align: center;
 background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Simpleicons_Interface_magnifier-1.svg/768px-Simpleicons_Interface_magnifier-1.svg.png) no-repeat scroll 0 0;
 background-size: contain;
 border:none;
 }

score 0 · Answer 2 · answered Mar 01 '20 at 04:35

You can use a flex box to center content.

.flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#searchbar {
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  color: transparent;
  background: #FFF;
  padding: 1px 1px 1px 5px;
  width: 30px;
  height: 30px;
  outline: none;
  border: 1px solid #CCCCCC;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  text-align: center;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Simpleicons_Interface_magnifier-1.svg/768px-Simpleicons_Interface_magnifier-1.svg.png) no-repeat scroll 0 0;
  background-size: contain;
  border: none;
}

<div class="flex">
  <input id="searchbar" name="search" size="1" autocomplete="off" maxlength="27">
</div>

Adding right: 50% to input tag doesn't do anything

2 Answers2