中心絕對塊：翻譯（-50％，-50％）的方式發行

這是我的例子：中心絕對塊：翻譯（-50％，-50％）的方式發行

body { 
 
    padding: 50px; 
 
} 
 

 
div { 
 
    width: 240px; 
 
    height: 150px; 
 
    border: 1px solid #ccc; 
 
    position: relative; 
 
} 
 

 
a { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    <div> 
 
    <a href="">Lorem ipsum dolor sit.</a> 
 
    </div> 
 
</body> 
 
</html>

我想在中心塊我絕對定位文本使用left: 50%; top: 50%; transform: translate(-50%, -50%);，但我的文字有換行符。顯然，我的塊有足夠的空間放置在一行文本。我不確定，但可能是有辦法解決這個問題？

來源

2017-10-07 Alexander Rodin

的left: 50%使a元件僅具有50％的寬度，即父元素的50％，因爲它開始在中間並延伸到右邊界。所以它的內容包裝在你的案例中，因爲它們不適合50％的寬度。

我建議的替代方案，其中Flexbox的不居中（實際上會導致更少的CSS）：

body { 
 
    padding: 50px; 
 
} 
 

 
div { 
 
    width: 240px; 
 
    height: 150px; 
 
    border: 1px solid #ccc; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <a href="">Lorem ipsum dolor sit.</a> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-10-07 22:47:01 Johannes

嘗試添加

a { white-space: nowrap; }

應該保持它作爲1號線。

而且你可以擺脫這一切的定位：只是a {line-height: 150px;}並添加text-align: center;到DIV：

body { 
 
    padding: 50px; 
 
} 
 

 
div { 
 
    width: 240px; 
 
    height: 150px; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
} 
 

 
a { 
 
    line-height: 150px; 
 
}

<div> 
 
    <a href="">Lorem ipsum dolor sit.</a> 
 
    </div>

來源

2017-10-07 22:27:12 curveball

您可以使用CSS Flexbox的模塊爲。您只需將包含元素設置爲display: flex並使用align-items和justify-content屬性設置內容的對齊方式。這種情況下的a元素不需要任何特殊的樣式。這是一個不錯的flexbox guide。

body { 
 
    padding: 50px; 
 
} 
 

 
div { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 

 
    width: 240px; 
 
    height: 150px; 
 
    padding: 1em; 
 
    border: 1px solid #ccc; 
 
    position: relative; 
 
}

<body> 
 
    <div> 
 
    <a href="#">The content is centered in the flex box no matter how many lines of text you have.</a> 
 
    </div> 
 
</body>

來源

2017-10-07 22:35:00 tobiv

中心絕對塊：翻譯（-50％，-50％）的方式發行

回答

相關問題