文本使用::之前和::不正确居中？

时间：2014-12-18 14:42:38

标签： html css pseudo-element

所以我在pseudo :: after元素中有一些带箭头的文本。箭头是一个div，边框底部和边框右边设置为1px实体。这是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;
}

我有一个文本，箭头附加在一个div中，我将div居中，我在div中设置text-align：center，理论上应该将文本与箭头居中。问题是，这是非常遥远的。最初，我认为这是因为:: after元素占用了不可见的额外空间，所以我在:: before元素中添加了一个不可见的箭头，看看是否将它平均化了。它没有。这是一张图片：

As you can see, the text ("In Construction") with the two arrows is clearly not centered.

然后我发现显然只有:: after元素存在问题，因为我所拥有的div在箭头之后非常大。这就是我的意思：

The blue box around the text represents the boundary of the div

In Construction附近的蓝色框表示包含div。最后有一个巨大的空间......我不知道为什么。它也应该包含整个事物，但是正如你所看到的那样它会在一半时间内被切断。

我考虑在:: after元素上设置一个负边距，但我不知道我需要多少设置它。有谁知道发生了什么？有没有办法摆脱这个空间？我很确定网页上没有任何其他内容会干扰。

编辑有人要求提供完整的HTML和CSS，这是非常多的，但还可以。

<!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 {

}

我知道格式有点偏，但我没有经历所有这些并将其缩进4个空格。

1 个答案:

答案 0 :(得分：0)

我不确定这与伪元素有什么关系。在#arrowcontainer的样式中，您设置了height: 20px，这就是容器只包含文本的一半的原因。如果删除它，则应包含p元素。

至于文本的定位，由于#arrow段落设置为float: left，因此它将自己定位在其容器的左侧，该容器保持在页面宽度的40％，因此右侧有额外的空间。

长话短说，除非你需要这些款式用于其他事情，否则我将从以下编辑开始：

#arrowcontainer {
    /* height: 20px; */
    width: 40%;
    text-align: center;
    margin-left: 30%;
    margin-top: 100px;
}

#arrow {
    /* float: left; */
}

代码笔供参考：

http://codepen.io/a_double/pen/WbxZJq

希望有所帮助！

相关问题
最新问题