x軸（+ veと-ve）の両側でどのように遷移しますか？

ホバー上のボタンの幅が50pxから300pxに変更されていますが、片面（肯定的または否定的）でしかありません。300pxと150pxの両側に幅を変更したいと思います。x軸（+ veと-ve）の両側でどのように遷移しますか？

.container-2 { 
 
    width: 300px; 
 
    vertical-align: middle; 
 
    white-space: nowrap; 
 
    position: relative; 
 
} 
 
.container-2 #search { 
 
    width: 50px; 
 
    -webkit-transition: width .55s ease-in-out; 
 
    -moz-transition: widtg .55s ease-in-out; 
 
    -ms-transition: width .55s ease-in-out; 
 
    -o-transition: width .55s ease-in-out; 
 
} 
 
.container-2:hover #search { 
 
    outline: none; 
 
    width: 300px; 
 
    -webkit-transition-delay: 0.2s; 
 
    -moz-transition-delay: 0.2s; 
 
    transition-delay: 0.2s; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div class="box"> 
 
    <div class="container-2"> 
 
     <span class="icon"> 
 
      <i class="fa fa-search"></i> 
 
     </span> 
 
     <input type="search" id="search" placeholder="Search Wikipedia" /> 
 

 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2016-07-22 Akshay Jr.

Placeボタン、次に 'transform-を追加します原点：50％50％; onボタン –

ここでは、2つの異なる実装を使用してフィドルです。最初のものはオリジナルのセンタリングトリックです。 2番目はフレックスボックスです。あなたはそれを離れて得ることができる場合は、フレックスを使用してください。ここで

はフレキシボックスを使用せずにCSSです：

#container-1 { 
    text-align: center; 
} 
#button-1 { 
    margin: auto; 
}

そして、これは、それはフレキシボックスである：コンテナの中央に

#container-2 { 
    display: flex; 
    justify-content: center; 
}

JSFiddle with CSS centering implementations

出典

2016-07-22 09:33:53 taystack

フレックスのようですね！ –

x軸（+ veと-ve）の両側でどのように遷移しますか？

答えて

関連する問題