Ärger mit der vertikalen Position der Texteinstellung

Ich habe versucht, dieses Bild zu replizieren, die eine Navigationsleiste auf einem chinesisches Forum ist. Das Bild ist auf Chinesisch, aber ich glaube, Sie sollten es verstehen. Kurz gesagt, der Text ist nicht vertikal zentriert, sondern 2px näher am oberen Rand. Ich habe versucht, Zeilenhöhe dafür zu setzen, aber dadurch wird der Text stattdessen vertikal zentriert. Weiß jemand, wie man den Text so einstellt, dass er "etwas nach oben" geht? Vielen Dank.

Im Folgenden ist der Code, den ich schreiben:

#box { 
 
    width: 280px; 
 
    background-color: #333; 
 
    border-bottom: 1px dotted #fff; 
 
} 
 

 
.content { 
 
    /*height: 30px;*/ 
 
    border-top: 1px dotted #fff; 
 
    text-align: left; 
 
    font: 14px/30px "宋体"; 
 
    color: #fff; 
 
}

<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>练习1</title> 
 
</head> 
 

 
<body> 
 
    <div id="box"> 
 
    <div class="content" id="syllabus">课程大纲</div> 
 
\t <div class="content" id="video">妙味视频</div> 
 
\t <div class="content" id="forum">妙味论坛</div> 
 
    </div> 
 
</body>

Quelle

2016-07-20 Gropai

'Position: relative; oben: -2px; 'ODER' transform: translateY (-2px); '? –

Kein isoliertes Problem Code keine Hilfe. – PeeHaa

Zeigen Sie uns das HTML und CSS, das dem entspricht, was Sie zentrieren möchten – Ephi

Gerade position:relative; und top:-2px; zu Ihrem .content CSS hinzugefügt:

#box { 
 
    width: 280px; 
 
    background-color: #333; 
 
    border-bottom: 1px dotted #fff; 
 
} 
 

 
.content { 
 
    /*height: 30px;*/ 
 
    border-top: 1px dotted #fff; 
 
    text-align: left; 
 
    font-size: 14px/30px "宋体"; 
 
    color: #fff; 
 
    position:relative; 
 
    top: -2px; 
 
}

<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>练习1</title> 
 
</head> 
 
<body> 
 
    <div id="box"> 
 
     <div class="content" id="syllabus">课程大纲</div> 
 
     <div class="content" id="video">妙味视频</div> 
 
     <div class="content" id="forum">妙味论坛</div> 
 
    </div> 
 

 
</body>

Quelle

2016-07-20 09:43:40

Vielleicht können Sie das CSS3 Flexbox-Modul verwenden. Die Arbeit an der .content Selector würde den Trick tun.

#box { 
 
    width: 280px; 
 
    background-color: #333; 
 
    border-bottom: 1px dotted #fff; 
 
} 
 

 
.content { 
 
    height: 30px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    /* center vertically if flex-direction is row */ 
 
    /* center horizontally if flex-direction is column */ 
 
    align-items: center; 
 
    /* center horizontally if flex-direction is row */ 
 
    /* center vertically if flex-direction is column */ 
 
    /* justify-content: center; */ 
 
    border-top: 1px dotted #fff; 
 
    text-align: left; 
 
    font: 14px/30px "宋体"; 
 
    color: #fff; 
 
}

<div id="box"> 
 
    <div class="content" id="syllabus">课程大纲</div> 
 
    <div class="content" id="video">妙味视频</div> 
 
    <div class="content" id="forum">妙味论坛</div> 
 
</div>

Quelle

2016-07-20 09:48:08

Ärger mit der vertikalen Position der Texteinstellung

Antwort

Verwandte Themen