中心绝对块：翻译（-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％）的方式发行

回答

相关问题