0

だから私はあらゆる種類の電話画面のデザインを作成しています. 複数の @media クエリを使用する代わりに、パーセンテージに基づいてあらゆる種類の画面に受け入れられるデザインを作成します。

含める必要があるものの 1 つは、ポートフォリオの「リスト」です。これは項目のリストで、それぞれに画像 (コンテナのサイズに合わせて自動的に調整されます) とその横にあるタイトルが含まれています。

ただし、上部に配置するのではなく、垂直方向の中央に配置する必要があります。Stackoverflow や他のサイトでいくつかの提案を試しました。しかし、何も機能させることができませんでした。

このJSfiddleをチェックしてください

次のようなものを機能させることができませんでした

div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

だから誰かが解決策を知っていることを願っています。心に留めておいてください：残りのすべても同様であるため、パーセンテージベースにする必要があります.

4

1 に答える 1

1

おそらく、次のようなものを探しています: JSFiddle ?

追加することで

position:relative

コンテナに追加すると、子要素の個々の配置を指定できるようになり、テキストをレスポンシブに中央に配置できるようになりました。これがあなたが探していたものでなかった場合はお知らせください。

.port_nav {
    background-color:rgba(255,255,255,0.3);
    width:80%;
    margin: 88px auto 0 auto;
    height:80%;
    position: relative;
}

個々の画像 (選択の問題を軽減するためにスパンを追加):

.port_nav .item .image {
    position: relative;
    width:30%;
    float:left;
    height:100%;
    background-color:rgba(255,255,255,0.3);
}

.port_nav .item .image span {
    position: absolute;
    width: 100%;
    text-align:center;
}
于 2013-10-07T17:23:30.620 に答える