如何在css中将行中心的文本对齐？

时间：2016-07-22 05:55:07

标签： html css

我有一个包含三行的列表。对于每一行，我有三列：第一列显示包含三行的作业的详细信息：作业名称，作业描述和作业类型，第二行显示位置，最后一行是截止日期。我的预期结果如下：

enter image description here 我正在使用w3.css来执行此操作。 

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

其中，我连续创建了三列。对于每一行，我按如下方式插入详细信息

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

我的问题是我无法将文本位置和时间对齐到行的中心。你能帮我解决一下吗？如何实现我的预期结果（在位置和时间后添加一些图标）？

这是我的CSS代码

＆＃13;
＆＃13; 
    body{
    	font-family: 'Arial', sans-serif;
    	font-size: 12px;
    	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 { 
    	display: block;
    	width: 100%;
    	border-bottom: 1px solid #b9b9b9;
    	border-top: 1px solid #f7f7f7;
    	background: #FFF;
     
    }
    span.jobtype{
      background-color: red;
      border-radius: 5px;
      border: 5px solid red;
      color: #FFFFFF;
    }
＆＃13; 
 <!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>
	<div id="view">	
		<div id="container">
			<ul>
				<!-- row 01 -->
				<a href="#"><li class="clearfix">
					<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> 
				</li></a>

				<!-- row 02 -->
				<a href="#"><li class="clearfix">
					<div class="w3-row-padding">  
						<div class="w3-third" style="width:50%">
							<h2>CEO</h2>
							<p class="desc">Think different</p>
							<span class="jobtype">Contract</span>
						</div>
						<div class="w3-third" style="width:30%">                              
							<p class="location">Denver</p>
						</div>
						<div class="w3-third" style="width:20%">
							<p class="time">Feb.</p>				
						</div> 
                     </div>
				</li></a>
			</ul>
		</div>
	</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

使用flexbox：添加/修改课程.w3-row-padding 

.w3-row-padding {
  display:flex;
  align-items:center;
  }

＆＃13;
＆＃13; 
body{
    	font-family: 'Arial', sans-serif;
    	font-size: 12px;
    	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 { 
    	display: block;
    	width: 100%;
    	border-bottom: 1px solid #b9b9b9;
    	border-top: 1px solid #f7f7f7;
    	background: #FFF;
     
    }
    span.jobtype{
      background-color: red;
      border-radius: 5px;
      border: 5px solid red;
      color: #FFFFFF;
    }
.w3-row-padding {
  display:flex;
  align-items:center;
  }
＆＃13; 
<!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>
	<div id="view">	
		<div id="container">
			<ul>
				<!-- row 01 -->
				<a href="#"><li class="clearfix">
					<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> 
				</li></a>

				<!-- row 02 -->
				<a href="#"><li class="clearfix">
					<div class="w3-row-padding">  
						<div class="w3-third" style="width:50%">
							<h2>CEO</h2>
							<p class="desc">Think different</p>
							<span class="jobtype">Contract</span>
						</div>
						<div class="w3-third" style="width:30%">                              
							<p class="location">Denver</p>
						</div>
						<div class="w3-third" style="width:20%">
							<p class="time">Feb.</p>				
						</div> 
				</li></a>
			</ul>
		</div>
	</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用display:flex垂直对齐div。

.w3-row-padding {
    align-items: center;
    display: flex;
}


    body{
    	font-family: 'Arial', sans-serif;
    	font-size: 12px;
    	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 { 
    	display: block;
    	width: 100%;
    	border-bottom: 1px solid #b9b9b9;
    	border-top: 1px solid #f7f7f7;
    	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>
	<div id="view">	
		<div id="container">
			<ul>
				<!-- row 01 -->
				<a href="#"><li class="clearfix">
					<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> 
				</li></a>

				<!-- row 02 -->
				<a href="#"><li class="clearfix">
					<div class="w3-row-padding">  
						<div class="w3-third" style="width:50%">
							<h2>CEO</h2>
							<p class="desc">Think different</p>
							<span class="jobtype">Contract</span>
						</div>
						<div class="w3-third" style="width:30%">                              
							<p class="location">Denver</p>
						</div>
						<div class="w3-third" style="width:20%">
							<p class="time">Feb.</p>				
						</div> 
				</li></a>
			</ul>
		</div>
	</div>
</body>
</html>

答案 2 :(得分：-1)

使用text-align: center;将文字放在中心位置。

相关问题
最新问题