要素を中心に正しく置く：

Question

フォーカス/ホバーを入力すると、入力タイプが入力されました。センターに正しく入力します。

だから、右の代わりに中央の幅を広げたいと思っています。またはそのように見えるものがあります。

.container { 
 
\t margin-top: 50px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t width: 142px; 
 
} 
 

 
.textbox { 
 
    border: 1px solid #848484; 
 
    -moz-border-radius-topleft: 30px; 
 
    -webkit-border-top-left-radius: 30px; 
 
    border-top-left-radius: 30px; 
 
    -moz-border-radius-topright: 30px; 
 
    -webkit-border-top-right-radius: 30px; 
 
    border-top-right-radius: 30px; 
 
    outline: 0; 
 
    height: 25px; 
 
    width: 125px; 
 
    padding: 2px 20px 2px 20px; 
 
    } 
 
    
 
input { 
 
    text-align: center; 
 
    width: 100px; 
 
    transition: ease-in-out, width .35s ease-in-out; 
 
    margin-bottom: 3px; 
 
    margin-top: 3px; 
 
} 
 

 
input:focus { 
 
    width: 150px; 
 
    margin-bottom: 3px; 
 
    margin-top: 3px; 
 
} 
 

 
input:hover { 
 
    width: 150px; 
 
    margin-bottom: 3px; 
 
    margin-top: 3px; 
 
} 
 

 
/* Ignore this */ 
 

 
p { 
 
    margin-top: 30px; 
 
    color: #a6a6a6; 
 
    text-align: center; 
 
}

<!-- Thanks for helping :p !--> 
 

 
<div class="container"> 
 
    <input type="text" class="textbox" placeholder="Some text in here!"> 
 
</div> 
 

 
<!-- Ignore !--> 
 
<p> So as you can see the width will expand to the right, how would I be able to center it while it's moving and keeping it centered?</p>

おかげで、

Answer 1

あなたがある.containerの固定幅の値によって引き起こされ、発生している問題：ここでは

コードだ（それは説明するのは少し奇妙な） :hoverにあなたの入力に適用している幅よりも小さい。

.container { 
 
\t margin-top: 50px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t text-align: center; 
 
} 
 

 
.textbox { 
 
    border: 1px solid #848484; 
 
    -moz-border-radius-topleft: 30px; 
 
    -webkit-border-top-left-radius: 30px; 
 
    border-top-left-radius: 30px; 
 
    -moz-border-radius-topright: 30px; 
 
    -webkit-border-top-right-radius: 30px; 
 
    border-top-right-radius: 30px; 
 
    outline: 0; 
 
    height: 25px; 
 
    width: 125px; 
 
    padding: 2px 20px 2px 20px; 
 
    } 
 
    
 
input { 
 
    text-align: center; 
 
    width: 100px; 
 
    transition: ease-in-out, width .35s ease-in-out; 
 
    margin-bottom: 3px; 
 
    margin-top: 3px; 
 
} 
 

 
input:focus { 
 
    width: 150px; 
 
    margin-bottom: 3px; 
 
    margin-top: 3px; 
 
} 
 

 
input:hover { 
 
    width: 150px; 
 
    margin-bottom: 3px; 
 
    margin-top: 3px; 
 
} 
 

 
/* Ignore this */ 
 

 
p { 
 
    margin-top: 30px; 
 
    color: #a6a6a6; 
 
    text-align: center; 
 
}

<!-- Thanks for helping :p !--> 
 

 
<div class="container"> 
 
    <input type="text" class="textbox" placeholder="Some text in here!"> 
 
</div> 
 

 
<!-- Ignore !--> 
 
<p> So as you can see the width will expand to the right, how would I be able to center it while it's moving and keeping it centered?</p>