Ich habe eine Liste, die drei Zeilen hat. Für jede Zeile habe ich drei Spalten: Die erste Spalte zeigt die Details eines Jobs, der drei Zeilen enthält: Jobname, Jobbeschreibung und Jobtyp, die zweite Zeile zeigt den Speicherort und die letzte Zeile das Fälligkeitsdatum. Mein erwartetes Ergebnis ist wie folgt:Wie kann ich den Text in der Mitte einer Zeile in CSS ausrichten?
Ich verwende w3.css, um es zu tun.
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
In dem ich drei Spalten hintereinander erstellt. Für jede Zeile, füge ich das Detail als
<div class="w3-row-padding">
<div class="w3-third" style="width:50%">
<h2>Wordpress desiger</h2>
<p class="desc">Wordpress and beyond </p>
<span class="jobtype">Part time</span>
</div>
<div class="w3-third" style="width:30%">
<p class="location">NY.</p>
</div>
<div class="w3-third" style="width:20%">
<p class="time">Jan.</p>
</div>
</div>
Mein Problem folgt, ist, dass ich nicht den Text Position ausrichten können, und die Zeit zum Zentrum einer Reihe. Könnten Sie mir helfen, es zu reparieren? Wie kann ich mein erwartetes Ergebnis erreichen (ein Icon hinter Ort und Zeit hinzufügen)?
Das ist mein CSS-Code
body{
\t font-family: 'Arial', sans-serif;
\t font-size: 12px;
\t overflow-x: hidden;
}
a { text-decoration: none; }
/** content display **/
#view { display: block; padding: 0; margin: 0; height:600px; overflow:hidden; overflow-y:scroll;}
#container { display: block; margin-top: 0px; }
#container ul a li {
\t display: block;
\t width: 100%;
\t border-bottom: 1px solid #b9b9b9;
\t border-top: 1px solid #f7f7f7;
\t background: #FFF;
}
span.jobtype{
background-color: red;
border-radius: 5px;
border: 5px solid red;
color: #FFFFFF;
}<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
\t <div id="view"> \t
\t \t <div id="container">
\t \t \t <ul>
\t \t \t \t <!-- row 01 -->
\t \t \t \t <a href="#"><li class="clearfix">
\t \t \t \t \t <div class="w3-row-padding">
\t \t \t \t \t \t <div class="w3-third" style="width:50%">
\t \t \t \t \t \t \t <h2>Wordpress desiger</h2>
\t \t \t \t \t \t \t <p class="desc">Wordpress and beyond </p>
\t \t \t \t \t \t \t <span class="jobtype">Part time</span>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="w3-third" style="width:30%">
\t \t \t \t \t \t \t <p class="location">NY.</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="w3-third" style="width:20%">
\t \t \t \t \t \t \t <p class="time">Jan.</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </li></a>
\t \t \t \t <!-- row 02 -->
\t \t \t \t <a href="#"><li class="clearfix">
\t \t \t \t \t <div class="w3-row-padding">
\t \t \t \t \t \t <div class="w3-third" style="width:50%">
\t \t \t \t \t \t \t <h2>CEO</h2>
\t \t \t \t \t \t \t <p class="desc">Think different</p>
\t \t \t \t \t \t \t <span class="jobtype">Contract</span>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="w3-third" style="width:30%">
\t \t \t \t \t \t \t <p class="location">Denver</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="w3-third" style="width:20%">
\t \t \t \t \t \t \t <p class="time">Feb.</p> \t \t \t \t
\t \t \t \t \t \t </div>
</div>
\t \t \t \t </li></a>
\t \t \t </ul>
\t \t </div>
\t </div>
</body>
</html>
Sorry, drückte ich Ctrl + F und nach "text-align", und es wurde nicht gefunden? Sind Sie sicher, dass Sie Ihren gesamten Code eingeben? –
Ich lösche es einfach, weil es nicht anders macht. Ich habe gerade hinzugefügt style = "text-align: center;" – user3051460
Die zweite Spalte ist für die Position nicht Zeile und letzte Spalte ist für Datum nicht letzte Zeile. –