- 首页
- 前端开发
- 带有 ::before 和 ::after 的文本未正确居中?
带有 ::before 和 ::after 的文本未正确居中?
[英] Text With ::before and ::after Not Centering Correctly?
本文介绍了带有 ::before 和 ::after 的文本未正确居中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我在伪 ::after 元素中有一些带有箭头的文本.箭头是一个 div，边框底部和边框右侧设置为 1px 实心.这是 CSS:
#arrow::after {位置:相对；顶部:5px；内容: "";显示:内联块；宽度:30px；高度:30px；边框底部:1px纯白色；右边框:1px纯白色；变换:旋转(-45度)；}#箭头:悬停{颜色:#404040；光标:指针；}#arrow:hover::after {边框颜色:#404040；}
我在 div 中有箭头所附的文本，并且我已经将 div 居中，并在 div 中设置了 text-align: center，理论上应该使文本与箭头居中.问题是距离太远了.最初，我认为这是因为 ::after 元素占用了不可见的额外空间，所以我在 ::before 元素中添加了一个不可见的箭头，看看是否可以将其拉平.它没有.这是一张图片:
然后我发现显然只有 ::after 元素有问题，因为我在箭头之后的 div 异常大.这就是我的意思:
In Construction 附近的蓝色框代表包含的 div.最后有一个巨大的空间......我不知道为什么.它也应该包含整个内容，但正如您所看到的那样，它在大约一半的地方被切断了.
我考虑过在 ::after 元素上设置负边距，但我不知道需要设置多少.有谁知道发生了什么?有没有办法摆脱这个空间?我很确定页面上没有其他内容会干扰.
EDIT 有人要求提供完整的 HTML 和 CSS，虽然很多，但还可以.
<头><title>Koowalk Games - 主页</title><link rel="stylesheet" href="koowalk.css"/><身体><h4 id="header">KOOWALK</h4><h4 id="headerb">游戏</h4><p>你好.我们是Koowalk Games.我们制作游戏.</p><div id="工作"><p id="workheader">游戏</p><div id="workbar"></div><div id="箭头容器"><p id="arrow">建设中</p>
<div class="gameleft"><p class="headerleft">游戏名称</p><p class="bodyleft">这将是游戏的描述.下面将是游戏的超级性感屏幕渲染.因为我知道你有多喜欢照片.因为某些原因.我真的不知道为什么.也许是因为你是个白痴.我觉得你是个白痴.我想诺亚也认为你是个白痴.如果你想知道为什么我花了这么长时间来开发这个网站，那是因为我在第一次迭代时完全搞砸了布局，不得不从头开始重新设计，以便正确调整大小.Web 开发看起来很简单，但让我告诉你，它可能是个婊子.很多.基于浮动的布局 = 爱.基于浮动的布局 = 生命.</p>
<div class="gameright"><p class="headerright">游戏名称</p><p class="bodyright">这将是游戏的描述.下面将是游戏的超级性感屏幕渲染.因为我知道你有多喜欢照片.因为某些原因.我真的不知道为什么.也许是因为你是个白痴.我觉得你是个白痴.我想诺亚也认为你是个白痴.如果您想知道为什么我花了这么长时间来开发这个网站，那是因为我在第一次迭代时完全搞砸了布局，不得不从头开始重新设计，以便正确调整大小.Web 开发看起来很简单，但让我告诉你，它可能是个婊子.很多.基于浮动的布局 = 爱.基于浮动的布局 = 生命.</p>
<div class="gameleft"><p class="headerleft">游戏名称</p><p class="bodyleft">这将是游戏的描述.下面将是游戏的超级性感屏幕渲染.因为我知道你有多喜欢照片.因为某些原因.我真的不知道为什么.也许是因为你是个白痴.我觉得你是个白痴.我想诺亚也认为你是个白痴.如果您想知道为什么我花了这么长时间来开发这个网站，那是因为我在第一次迭代时完全搞砸了布局，不得不从头开始重新设计，以便正确调整大小.Web 开发看起来很简单，但让我告诉你，它可能是个婊子.很多.基于浮动的布局 = 爱.基于浮动的布局 = 生命.</p>
<div class="gameright"><p class="headerright">游戏名称</p><p class="bodyright">这将是游戏的描述.下面将是游戏的超级性感屏幕渲染.因为我知道你有多喜欢照片.因为某些原因.我真的不知道为什么.也许是因为你是个白痴.我觉得你是个白痴.我想诺亚也认为你是个白痴.如果你想知道为什么我花了这么长时间来开发这个网站，那是因为我在第一次迭代时完全搞砸了布局，不得不从头开始重新设计，以便正确调整大小.Web 开发看起来很简单，但让我告诉你，它可能是一个婊子.很多.基于浮动的布局 = 爱.基于浮动的布局 = 生命.</p>
<div id="inprogress"><p id="inheader">我们正在开发的游戏</p><div id="inbar"></div><p id="inintro">这些是我们目前正在开发的一些游戏.<span>订阅我们的电子邮件列表</span></p><div class="inprogresssubsection"><p class="progressheader">一些愚蠢的游戏</p><p class="progresscontent">词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词</p>
<div class="inprogresssubsection"><p class="progressheader">一些愚蠢的游戏</p><p class="progresscontent">词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词</p>
<div id="员工">
<script type="text/javascript">var bar = document.getElementById("workbar");var bar2 = document.getElementById("inbar");无功x = 0;window.onload = 改变；功能变化(){请求动画帧(颜色)；}函数颜色(){bar.style.background = "hsl(" + x + ", 100%, 50%)";bar2.style.background = "hsl(" + x + ", 100%, 50%)";如果 (x <358) {x++;请求动画帧(颜色)；}别的 {x = 0;请求动画帧(颜色)；}}</html>
CSS:
@font-face {font-family: "Veger";src: url('Fonts/Veger(light).ttf');}@font-face {font-family: "Kloe";src: url('字体/ff4a_kloe_thin-web.ttf');}::选择{背景色:#004089；白颜色;}::-moz-选择{背景色:#004089；白颜色;}身体 {背景:#5a5a5a；字体系列:素食主义者；白颜色;文本对齐:居中；溢出:隐藏；}#header {字体大小:100px；颜色:#49ffdc；}#headerb {字体大小:100px；边距顶部:-145px；颜色:#ffff63；}p{字体系列:Kloe，sans；字体大小:40px；左边距:15%；右边距:15%；边距顶部:-40px；}/*工作瓷砖*/#工作 {位置:绝对；显示:内联块；左:0px；右:0px；边距:0；左边距:0%；填充:0；宽度:100%；背景:#ff4545；边距顶部:100px；}#箭头容器{高度:20px；宽度:40%；文本对齐:居中；左边距:30%；边距顶部:100px；}#箭 {向左飘浮;}#arrow::before {位置:相对；顶部:5px；内容: "";显示:内联块；宽度:30px；高度:30px；边框底部:1px 实心；右边框:1px 实心；变换:旋转(135度)；}#arrow::after {位置:相对；顶部:5px；内容: "";显示:内联块；宽度:30px；高度:30px；边框底部:1px纯白色；右边框:1px纯白色；变换:旋转(-45度)；}#箭头:悬停{颜色:#404040；光标:指针；}#arrow:hover::after {边框颜色:#404040；}#workheader {字体系列:Kloe，sans；字体大小:80px；边距顶部:10px；}#工作栏{向左飘浮;宽度:50%；左边距:25%；右边距:25%；高度:3px；边距顶部:-70px；背景:hsl(0, 100%, 50%);}/*工作字幕*/.gameleft {向左飘浮;清楚:两者；宽度:25%；左边距:20%；底边距:50px；边距顶部:30px；背景:#5a5a5a；白颜色;字体系列:Kloe，sans；}.headerleft {边距顶部:10px；字体大小:50px；}.bodyleft {字体大小:15px；底边距:300px；}.gameright {浮动:对；宽度:25%；右边距:20%；底边距:50px；边距顶部:30px；背景:#5a5a5a；白颜色;字体系列:Kloe，sans；}.headerright {边距顶部:10px；字体大小:50px；}.bodyright {字体大小:15px；底边距:300px；}/*进行中标题-注意:进行中部分必须始终比工作部分短！！！总是！！！就像字面上的人一样！！！！原因格式化！！！*/#进行中 {位置:绝对；显示:内联块；左:0px；右:0px；边距:0；左边距:100%；填充:0；宽度:100%；背景:#ff4545；边距顶部:100px；}#inheader {字体系列:Kloe，sans；字体大小:80px；边距顶部:10px；}#inbar {向左飘浮;宽度:50%；左边距:25%；右边距:25%；高度:3px；边距顶部:-70px；背景:hsl(0, 100%, 50%);}#介绍{字体系列:Kloe，sans；字体大小:25px；边距顶部:-20px；底边距:125px；}#intro span {颜色:#5a5a5a；}#intro span:悬停{光标:指针；白颜色;}/*正在进行的小节*/.inprogresssubsection {向左飘浮;宽度:80%；左边距:10%；底边距:50px；背景:#5a5a5a；}.progressheader {向左飘浮;字体大小:50px；文本对齐:左；左边距:2%；边距顶部:0px；}.进度内容{向左飘浮;字体大小:15px；文本对齐:左；左边距:2%；边距顶部:-40px；底边距:500px；宽度:90%；}/*职员*/#职员 {}
我知道格式有点不对，但我不会仔细检查所有内容并将其缩进 4 个空格.
解决方案
我不确定这与伪元素有什么关系.在 #arrowcontainer 的样式中，您设置了 height: 20px，这就是容器只包含一半文本的原因.如果删除它，它应该包含 p 元素.
至于文本的定位，由于#arrow段落被设置为float: left，它将自身定位在其容器的左侧，停留在页面宽度的 40%，因此右侧有额外的空间.
长话短说，除非您需要将这些样式用于其他用途，否则我会从以下编辑开始:
#arrowcontainer {/* 高度:20px;*/宽度:40%；文本对齐:居中；左边距:30%；边距顶部:100px；}#箭 {/* 向左飘浮;*/}
代码笔供参考:
http://codepen.io/a_double/pen/WbxZJq
希望有帮助！
So I've got some text with an arrow in the pseudo ::after element. The arrow is a div with a border-bottom and border-right set to 1px solid. Here's the CSS:
#arrow::after {
position: relative;
top: 5px;
content: "";
display: inline-block;
width: 30px;
height: 30px;
border-bottom: 1px solid white;
border-right: 1px solid white;
transform: rotate(-45deg);
}
#arrow:hover {
color: #404040;
cursor: pointer;
}
#arrow:hover::after {
border-color: #404040;
}
I have the text that the arrow is attached to in a div, and I've centered the div, and I set text-align: center in the div, which in theory should be centering the text with the arrow. The problem is that it's very far off. Originally, I believed that it was because the ::after element was taking up invisible extra space, so I added an invisible arrow to the ::before element to see if that evened it out. And it didn't. Here's a picture:
I then found out that it is clearly a problem with only the ::after element, because the div I have it in is unusually large after the arrow. Here's what I mean:
The blue box near In Construction represents the containing div. There's a huge space at the end... and I don't know why. It's also supposed to be containing the whole thing, but as you can see it cuts off about halfway up.
I've considered setting a negative margin-right on the ::after element, but I don't know how much I need to set it to. Does anyone know what's going on? Is there any way to get rid of this space? I'm pretty sure there's nothing else on the page that would be interfering.
EDIT Someone asked for complete HTML and CSS, which is quite a lot, but ok.
<!DOCTYPE html>
<html>
<head>
<title>Koowalk Games - Home</title>
<link rel="stylesheet" href="koowalk.css"/>
</head>
<body>
<h4 id="header">KOOWALK</h4>
<h4 id="headerb">GAMES</h4>
<p>Hello. We're Koowalk Games. We make games.</p>
<div id="work">
<p id="workheader">Games</p>
<div id="workbar"></div>
<div id="arrowcontainer">
<p id="arrow">In Construction</p>
</div>
<div class="gameleft">
<p class="headerleft">Game Title</p>
<p class="bodyleft">This will be a description of the game. Below this will be a super sexy screen render of the game. Cause I know how much you love pictures. For some reason. I don't really know why. Maybe it's cause you're an idiot. I think you're an idiot. I think Noah thinks you're an idiot too. If your wondering why it's taking me so long to develop this site, it's cause I completely fucked up the layout on my first iteration and had to redesign from scratch in order for it to resize properly. Web development looks easy, but let me tell you, it can be a bitch. A lot. Float based layouts = love. Float based layouts = life.</p>
</div>
<div class="gameright">
<p class="headerright">Game Title</p>
<p class="bodyright">This will be a description of the game. Below this will be a super sexy screen render of the game. Cause I know how much you love pictures. For some reason. I don't really know why. Maybe it's cause you're an idiot. I think you're an idiot. I think Noah thinks you're an idiot too. If your wondering why it's taking me so long to develop this site, it's cause I completely fucked up the layout on my first iteration and had to redesign from scratch in order for it to resize properly. Web development looks easy, but let me tell you, it can be a bitch. A lot. Float based layouts = love. Float based layouts = life.</p>
</div>
<div class="gameleft">
<p class="headerleft">Game Title</p>
<p class="bodyleft">This will be a description of the game. Below this will be a super sexy screen render of the game. Cause I know how much you love pictures. For some reason. I don't really know why. Maybe it's cause you're an idiot. I think you're an idiot. I think Noah thinks you're an idiot too. If your wondering why it's taking me so long to develop this site, it's cause I completely fucked up the layout on my first iteration and had to redesign from scratch in order for it to resize properly. Web development looks easy, but let me tell you, it can be a bitch. A lot. Float based layouts = love. Float based layouts = life.</p>
</div>
<div class="gameright">
<p class="headerright">Game Title</p>
<p class="bodyright">This will be a description of the game. Below this will be a super sexy screen render of the game. Cause I know how much you love pictures. For some reason. I don't really know why. Maybe it's cause you're an idiot. I think you're an idiot. I think Noah thinks you're an idiot too. If your wondering why it's taking me so long to develop this site, it's cause I completely fucked up the layout on my first iteration and had to redesign from scratch in order for it to resize properly. Web development looks easy, but let me tell you, it can be a bitch. A lot. Float based layouts = love. Float based layouts = life.</p>
</div>
</div>
<div id="inprogress">
<p id="inheader">Games We're Working On</p>
<div id="inbar"></div>
<p id="inintro">These are some games we're working on right now. <span>Subscribe to our email list</span> for updates.</p>
<div class="inprogresssubsection">
<p class="progressheader">Some Stupid Game</p>
<p class="progresscontent">Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words</p>
</div>
<div class="inprogresssubsection">
<p class="progressheader">Some Stupid Game</p>
<p class="progresscontent">Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words</p>
</div>
</div>
<div id="staff">
</div>
<script type="text/javascript">
var bar = document.getElementById("workbar");
var bar2 = document.getElementById("inbar");
var x = 0;
window.onload = change;
function change() {
requestAnimationFrame(color);
}
function color() {
bar.style.background = "hsl(" + x + ", 100%, 50%)";
bar2.style.background = "hsl(" + x + ", 100%, 50%)";
if (x < 358) {
x++;
requestAnimationFrame(color);
}
else {
x = 0;
requestAnimationFrame(color);
}
}
</script>
</body>
</html>
CSS:
@font-face {font-family: "Veger"; src: url('Fonts/Veger(light).ttf'); }
@font-face {font-family: "Kloe"; src: url('Fonts/ff4a_kloe_thin-web.ttf'); }
::selection {
background-color: #004089;
color: white;
}
::-moz-selection {
background-color: #004089;
color: white;
}
body {
background: #5a5a5a;
font-family: Veger;
color: white;
text-align: center;
overflow: hidden;
}
#header {
font-size: 100px;
color: #49ffdc;
}
#headerb {
font-size: 100px;
margin-top: -145px;
color: #ffff63;
}
p {
font-family: Kloe, sans;
font-size: 40px;
margin-left: 15%;
margin-right: 15%;
margin-top: -40px;
}
/*Work Tile*/
#work {
position: absolute;
dispay: inline-block;
left: 0px;
right: 0px;
margin: 0;
margin-left: 0%;
padding: 0;
width: 100%;
background: #ff4545;
margin-top: 100px;
}
#arrowcontainer {
height: 20px;
width: 40%;
text-align: center;
margin-left: 30%;
margin-top: 100px;
}
#arrow {
float: left;
}
#arrow::before {
position: relative;
top: 5px;
content: "";
display: inline-block;
width: 30px;
height: 30px;
border-bottom: 1px solid;
border-right: 1px solid;
transform: rotate(135deg);
}
#arrow::after {
position: relative;
top: 5px;
content: "";
display: inline-block;
width: 30px;
height: 30px;
border-bottom: 1px solid white;
border-right: 1px solid white;
transform: rotate(-45deg);
}
#arrow:hover {
color: #404040;
cursor: pointer;
}
#arrow:hover::after {
border-color: #404040;
}
#workheader {
font-family: Kloe, sans;
font-size: 80px;
margin-top: 10px;
}
#workbar {
float: left;
width: 50%;
margin-left: 25%;
margin-right: 25%;
height: 3px;
margin-top: -70px;
background: hsl(0, 100%, 50%);
}
/*Work Subtiles*/
.gameleft {
float: left;
clear: both;
width: 25%;
margin-left: 20%;
margin-bottom: 50px;
margin-top: 30px;
background: #5a5a5a;
color: white;
font-family: Kloe, sans;
}
.headerleft {
margin-top: 10px;
font-size: 50px;
}
.bodyleft {
font-size: 15px;
margin-bottom: 300px;
}
.gameright {
float: right;
width: 25%;
margin-right: 20%;
margin-bottom: 50px;
margin-top: 30px;
background: #5a5a5a;
color: white;
font-family: Kloe, sans;
}
.headerright {
margin-top: 10px;
font-size: 50px;
}
.bodyright {
font-size: 15px;
margin-bottom: 300px;
}
/*In Progress Title -- NOTE: The in-progress section MUST ALWAYS BE SHORTER THAN THE WORK SECTION!!! ALWAYS!!! LIKE LITERALLY ALWAYS MAN!!!! CAUSE FORMATTING!!!*/
#inprogress {
position: absolute;
dispay: inline-block;
left: 0px;
right: 0px;
margin: 0;
margin-left: 100%;
padding: 0;
width: 100%;
background: #ff4545;
margin-top: 100px;
}
#inheader {
font-family: Kloe, sans;
font-size: 80px;
margin-top: 10px;
}
#inbar {
float: left;
width: 50%;
margin-left: 25%;
margin-right: 25%;
height: 3px;
margin-top: -70px;
background: hsl(0, 100%, 50%);
}
#inintro {
font-family: Kloe, sans;
font-size: 25px;
margin-top: -20px;
margin-bottom: 125px;
}
#inintro span {
color: #5a5a5a;
}
#inintro span:hover {
cursor: pointer;
color: white;
}
/*In Progress Subsections*/
.inprogresssubsection {
float: left;
width: 80%;
margin-left: 10%;
margin-bottom: 50px;
background: #5a5a5a;
}
.progressheader {
float: left;
font-size: 50px;
text-align: left;
margin-left: 2%;
margin-top: 0px;
}
.progresscontent {
float: left;
font-size: 15px;
text-align: left;
margin-left: 2%;
margin-top: -40px;
margin-bottom: 500px;
width: 90%;
}
/*Staff*/
#staff {
}
I know the formatting is a bit off, but I'm not going through all that and indenting it by 4 spaces.
解决方案
I'm not sure this has anything to do with the pseudo elements. In your styles for #arrowcontainer, you have height: 20px set, which is why the container only contains half of the text. If you remove that, it should contain the p element.
As for the positioning of the text, since the #arrow paragraph is set to float: left, it positions itself to the left of its container, which stays at 40% of the width of the page, hence the extra space on the right side.
Long story short, unless you need those styles for other things, I'd start with the following edits:
#arrowcontainer {
/* height: 20px; */
width: 40%;
text-align: center;
margin-left: 30%;
margin-top: 100px;
}
#arrow {
/* float: left; */
}
Code Pen for reference:
http://codepen.io/a_double/pen/WbxZJq
Hope that helps!
这篇关于带有 ::before 和 ::after 的文本未正确居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
