在彎曲項目中顯示彎曲

我想讓我的鏈接文本垂直和水平居中，但由於某種原因它左對齊。我認爲基於Flex的路線會集中在這個？我曾看過using a flex item as a flex container，並認爲這是允許的，但由於某種原因不起作用。在彎曲項目中顯示彎曲

.trow { 
 
    width: 50%; 
 
    display: flex; 
 
    min-width: 350px; 
 
} 
 

 
img { 
 
    height: 150px; 
 
    float: left; 
 
} 
 

 
a { 
 
    height: 58%; 
 
    background-color: #3d7db7; 
 
    width: 100%; 
 
} 
 

 
#box1 { 
 
    flex: initial; 
 
} 
 

 
#box2 { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    text-align:center; /* thanks to answers but vertically not working?*/ 
 
}


 
    <div class="trow"> 
 
    <div id="box1"><img src="images/Image.png"></div> 
 
    <div id="box2"> 
 
     <a href="#">Link here</a> 
 
    </div> 
 
    </div>

來源

2017-05-08 Ukuser32

由於你的錨是不是它的容器的整個高度，你需要它的容器Flex和垂直對齊方式添加到 - 這讓你的藍父的中心DIV。

接下來，居中的錨文本，你需要做的是Flex和對齊太證明該內容：

.trow { 
 
    width: 50%; 
 
    display: flex; 
 
    min-width: 350px; 
 
} 
 

 
#box2 { 
 
    flex-grow: 1;   /* make link holder grow the rest of the width (and height) */ 
 
    display: flex;  /* add this to allow for vertical centring of it's content */ 
 
    align-items: center; /* this vertically centres */ 
 
} 
 

 
a { 
 
    display: flex;    /* add this to allow for vertical and horizontal centring of the anchor text */ 
 
    justify-content: center; /* horizontal centre */ 
 
    align-items: center;  /* vertical centre */ 
 
    height: 58%; 
 
    background-color: #3d7db7; 
 
    width: 100%; 
 
}

<div class="trow"> 
 
    <div id="box1"><img src="http://placehold.it/100x100"></div> 
 
    <div id="box2"> 
 
    <a href="#">Link here</a> 
 
    </div> 
 
</div>

來源

2017-05-08 13:16:01 Pete

要對齊在中心使用的文字：text-align: center

對於垂直排列，還可以添加到flexa

.trow { 
 
    width: 50%; 
 
    display: flex; 
 
    min-width: 350px; 
 
    height: 100px; 
 
} 
 

 
img { 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
a { 
 
    height: 58%; 
 
    background-color: #3d7db7; 
 
    width: 100%; 
 
} 
 

 
#box1 { 
 
    flex: initial; 
 
} 
 

 
#box2 { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    text-align: center; 
 
} 
 

 
#box2 a { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
</head> 
 
<body> 
 
    <div class="trow"> 
 
    <div id="box1"><img src="images/Image.png"></div> 
 
    <div id="box2"> 
 
     <a href="#">Link here</a> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-05-08 13:05:37

雖然這裏的問題不只是文字對齊，但垂直對齊也不正確....如果圖像是100px高 - 它不會工作:( – Ukuser32

請參閱編輯的問題.. – Ukuser32

好了現在它的作品 –

爲＃box2添加了text-align: center;。

.trow { 
 
    width: 50%; 
 
    display: flex; 
 
    min-width: 350px; 
 
    align-items: center; 
 
} 
 

 
img { 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
a { 
 
    height: 58%; 
 
    background-color: #3d7db7; 
 
    width: 100%; 
 
} 
 

 
#box1 { 
 
    flex: initial; 
 
} 
 

 
#box2 { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    text-align: center; 
 
}

<div class="trow"> 
 
    <div id="box1"><img src="images/Image.png"></div> 
 
    <div id="box2"> 
 
    <a href="#">Link here</a> 
 
    </div> 
 
</div>

來源

2017-05-08 13:06:44 athi

不幸的是，如果圖像的高度爲100px，則不能垂直驗證 – Ukuser32

請立即檢查。我已經爲圖像設置了100px的高度，並且它是垂直居中的。 – athi

恐怕我仍然看到它頂部對齊，並根據我更新的問題。 – Ukuser32

我已經做了幾個變化無處不在，檢查出的差異

.trow { 
 
    width: 50%; 
 
    display: flex; 
 
    min-width: 350px; 
 
} 
 

 
img { 
 
    height: 150px; 
 
    float: left; 
 
} 
 

 
a { 
 
    background-color: #3d7db7; 
 
} 
 

 
#box2 { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background: beige; 
 
}

<div class="trow"> 
 
    <div id="box1"><img src="images/Image.png"></div> 
 
    <div id="box2"> 
 
    <a href="#">Link here</a> 
 
    </div> 
 
</div>

來源

2017-05-08 13:19:55

在彎曲項目中顯示彎曲

回答

相關問題