如何在css表格单元格中将文本对齐到顶部

时间：2016-12-26 06:48:47

标签： html css

我有像这里的html表

＆＃13;
＆＃13; 
   .table {
  margin: 0 0 40px 0;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: table;
}
@media screen and (max-width: 580px) {
  .table {
	display: block;
  }
}

.row {
  display: table-row;
  background: #f6f6f6;
}
.row:nth-of-type(odd) {
  background: #e9e9e9;
}
.row.header {
  font-weight: 900;
  color: #ffffff;
  background: #ea6153;
}
.row.green {
  background: #27ae60;
}
.row.blue {
  background: #2980b9;
}
@media screen and (max-width: 580px) {
  .row {
	padding: 8px 0;
	display: block;
  }
}

.cell {
  padding: 6px 6px;
  display: table-cell;
  line-height: 1.2em;
}
@media screen and (max-width: 580px) {
  .cell {
	padding: 2px 12px;
	display: block;
  }
}
＆＃13; 
<div class="table">
	<div class="row header green">
	  <div class="cell">

	  </div>
	  <div class="cell">
		Name
	  </div>
	  <div class="cell">
		Id
	  </div>
	  <div class="cell">
		Author
	  </div>
	  <div class="cell">
		Price
	  </div>
	</div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh3.googleusercontent.com/P0aVrLO7Wxob0dIBx80m85wUyHFiK3-Xw7Xw_6CDFAogdeoRR0YWnSjkFNOR4M7nIA=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>Flightradar24 - Flight Tracker</h1>
		  <span>com.flightradar24pro</span>
		</div>
		<div class="cell">
		  com.flightradar24pro
		</div>
		<div class="cell">
		  Flightradar24 AB
		</div>
		<div class="cell">
		  $3.99
		</div>
	  </div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh3.googleusercontent.com/JXJb3299C15MfJGA0wWoNCq-qNdNOuTXLuvd8mg0Wa3VRTPIDlPMfmUZK-Sn8WLiPz0=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>WatchMaker Premium Watch Face</h1>
		  <span>slide.watchFrenzy.premium</span>
		</div>
		<div class="cell">
		  slide.watchFrenzy.premium
		</div>
		<div class="cell">
		  androidslide
		</div>
		<div class="cell">
		  $3.99
		</div>
	  </div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh3.ggpht.com/a125TbrsUMdstTX1UQDPlrIQkFphGp9SQpT30sE8vsEkBj33YulEgaeN8rmmgL5ngk0=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>Ski Tracks</h1>
		  <span>com.corecoders.skitracks</span>
		</div>
		<div class="cell">
		  com.corecoders.skitracks
		</div>
		<div class="cell">
		  Core Coders Ltd
		</div>
		<div class="cell">
		  $0.99
		</div>
	  </div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh3.googleusercontent.com/WcL0Crw46EJubniXfwCZbVgO7JF9ToVjVjPwlqCqZOhLWtrp8mGjaoh865ZXdhiG1A=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>Weather Timeline - Forecast</h1>
		  <span>com.samruston.weather</span>
		</div>
		<div class="cell">
		  com.samruston.weather
		</div>
		<div class="cell">
		  Sam Ruston
		</div>
		<div class="cell">
		  $1.49
		</div>
	  </div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh3.googleusercontent.com/dsQKC-6sq0rJZX3I1N5ivpU3fS8s-mokRlZnV8gDI9tIdt523j2df8AwwMHVGkvG76Q=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>Unified Remote Full</h1>
		  <span>com.Relmtech.RemotePaid</span>
		</div>
		<div class="cell">
		  com.Relmtech.RemotePaid
		</div>
		<div class="cell">
		  Unified Intents
		</div>
		<div class="cell">
		  $0.99
		</div>
	  </div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh5.ggpht.com/YmbOfBlKGDy7K39ngf5m0vrXG8gK-gCORC1ybbtMVJa63MX1SPjtxi4jMQmRrcazgw=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>NOAA Weather Unofficial (Pro)</h1>
		  <span>com.nstudio.weatherhere</span>
		</div>
		<div class="cell">
		  com.nstudio.weatherhere
		</div>
		<div class="cell">
		  Granite Apps
		</div>
		<div class="cell">
		  $1.99
		</div>
	  </div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh3.googleusercontent.com/HB1NQpjlT21nGLFXCc5lLHXqtft9CHNq8nLW16DDJF_d61_9CVYbEuRfrYGfIXI8V2Y=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>Password Manager SafeInCloud™</h1>
		  <span>com.safeincloud</span>
		</div>
		<div class="cell">
		  com.safeincloud
		</div>
		<div class="cell">
		  SafeInCloud
		</div>
		<div class="cell">
		  $2.99
		</div>
	  </div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh3.googleusercontent.com/twhd0ckGPSETQH7TDkiYvrJr-FKQ-YP1Bll1_-Dk-1Bx4YdJJ1HwinVhHk6uy_YYEe8=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>Talon for Twitter</h1>
		  <span>com.klinker.android.twitter_l</span>
		</div>
		<div class="cell">
		  com.klinker.android.twitter_l
		</div>
		<div class="cell">
		  Luke Klinker
		</div>
		<div class="cell">
		  $1.49
		</div>
	  </div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh3.googleusercontent.com/UgItAs4ckdGHTXTVWNQ0NNrWy9rh6ya4BrjwAUPMsgMpwOI2NQ7N0zvfQ8eyb78NzHE=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>Watch Face - Minimal &amp; Elegant</h1>
		  <span>com.stmp.minimalface</span>
		</div>
		<div class="cell">
		  com.stmp.minimalface
		</div>
		<div class="cell">
		  Studio eXtreme
		</div>
		<div class="cell">
		  $1.59
		</div>
	  </div>
	
	  <div class="row">
		<div class="cell">
		  <img src="https://lh3.googleusercontent.com/OZQhEH8B9PNGPkOlx714tIK0mEjMBHUEoJdb2bqUY01i9SKh8iI66j9RMRRzYCvKpYc=w340" width="50" height="50">
		</div>
		<div class="cell">
		  <h1>Weather Live</h1>
		  <span>com.apalon.weatherlive</span>
		</div>
		<div class="cell">
		  com.apalon.weatherlive
		</div>
		<div class="cell">
		  Apalon Apps
		</div>
		<div class="cell">
		  $0.99
		</div>
	  </div>
	
  </div>
＆＃13;
＆＃13;
＆＃13;

然后像这里详细说明css：

我得到的问题是当我将单元格与图像组合时，结果表会想要这张图片： html table

那么如何使文本在顶部对齐？所以红色区域会很清楚。感谢

js小提琴细节你可以看到这个链接 html table jsfiddle

2 个答案:

答案 0 :(得分：0)

使用vertical-align:top 

.cell {
   padding: 6px 6px;
   display: table-cell;
   line-height: 1.2em;
   vertical-align:top;
}
.cell h1 {
   margin-top:4px;
}

用小提琴检查

https://jsfiddle.net/bc7rf85k/4/

答案 1 :(得分：0)

＆＃13;
＆＃13; 
.table {
  margin: 0 0 40px 0;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: table;
}
@media screen and (max-width: 580px) {
  .table {
    display: block;
  }
}

.row {
  display: table-row;
  background: #f6f6f6;
}
.row:nth-of-type(odd) {
  background: #e9e9e9;
}
.row.header {
  font-weight: 900;
  color: #ffffff;
  background: #ea6153;
}
.row.green {
  background: #27ae60;
}
.row.blue {
  background: #2980b9;
}
@media screen and (max-width: 580px) {
  .row {
    padding: 8px 0;
    display: block;
  }
}

.cell {
   padding: 6px 6px;
   display: table-cell;
   line-height: 1.2em;
   vertical-align:top;
}
.cell h1 {
   margin-top:4px;
}
@media screen and (max-width: 580px) {
  .cell {
    padding: 2px 12px;
    display: block;
  }
}
＆＃13; 
<div class="table">
        <div class="row header green">
          <div class="cell">

          </div>
          <div class="cell">
            Name
          </div>
          <div class="cell">
            Id
          </div>
          <div class="cell">
            Author
          </div>
          <div class="cell">
            Price
          </div>
        </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh3.googleusercontent.com/P0aVrLO7Wxob0dIBx80m85wUyHFiK3-Xw7Xw_6CDFAogdeoRR0YWnSjkFNOR4M7nIA=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>Flightradar24 - Flight Tracker</h1>
              <span>com.flightradar24pro</span>
            </div>
            <div class="cell">
              com.flightradar24pro
            </div>
            <div class="cell">
              Flightradar24 AB
            </div>
            <div class="cell">
              $3.99
            </div>
          </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh3.googleusercontent.com/JXJb3299C15MfJGA0wWoNCq-qNdNOuTXLuvd8mg0Wa3VRTPIDlPMfmUZK-Sn8WLiPz0=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>WatchMaker Premium Watch Face</h1>
              <span>slide.watchFrenzy.premium</span>
            </div>
            <div class="cell">
              slide.watchFrenzy.premium
            </div>
            <div class="cell">
              androidslide
            </div>
            <div class="cell">
              $3.99
            </div>
          </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh3.ggpht.com/a125TbrsUMdstTX1UQDPlrIQkFphGp9SQpT30sE8vsEkBj33YulEgaeN8rmmgL5ngk0=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>Ski Tracks</h1>
              <span>com.corecoders.skitracks</span>
            </div>
            <div class="cell">
              com.corecoders.skitracks
            </div>
            <div class="cell">
              Core Coders Ltd
            </div>
            <div class="cell">
              $0.99
            </div>
          </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh3.googleusercontent.com/WcL0Crw46EJubniXfwCZbVgO7JF9ToVjVjPwlqCqZOhLWtrp8mGjaoh865ZXdhiG1A=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>Weather Timeline - Forecast</h1>
              <span>com.samruston.weather</span>
            </div>
            <div class="cell">
              com.samruston.weather
            </div>
            <div class="cell">
              Sam Ruston
            </div>
            <div class="cell">
              $1.49
            </div>
          </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh3.googleusercontent.com/dsQKC-6sq0rJZX3I1N5ivpU3fS8s-mokRlZnV8gDI9tIdt523j2df8AwwMHVGkvG76Q=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>Unified Remote Full</h1>
              <span>com.Relmtech.RemotePaid</span>
            </div>
            <div class="cell">
              com.Relmtech.RemotePaid
            </div>
            <div class="cell">
              Unified Intents
            </div>
            <div class="cell">
              $0.99
            </div>
          </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh5.ggpht.com/YmbOfBlKGDy7K39ngf5m0vrXG8gK-gCORC1ybbtMVJa63MX1SPjtxi4jMQmRrcazgw=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>NOAA Weather Unofficial (Pro)</h1>
              <span>com.nstudio.weatherhere</span>
            </div>
            <div class="cell">
              com.nstudio.weatherhere
            </div>
            <div class="cell">
              Granite Apps
            </div>
            <div class="cell">
              $1.99
            </div>
          </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh3.googleusercontent.com/HB1NQpjlT21nGLFXCc5lLHXqtft9CHNq8nLW16DDJF_d61_9CVYbEuRfrYGfIXI8V2Y=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>Password Manager SafeInCloud™</h1>
              <span>com.safeincloud</span>
            </div>
            <div class="cell">
              com.safeincloud
            </div>
            <div class="cell">
              SafeInCloud
            </div>
            <div class="cell">
              $2.99
            </div>
          </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh3.googleusercontent.com/twhd0ckGPSETQH7TDkiYvrJr-FKQ-YP1Bll1_-Dk-1Bx4YdJJ1HwinVhHk6uy_YYEe8=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>Talon for Twitter</h1>
              <span>com.klinker.android.twitter_l</span>
            </div>
            <div class="cell">
              com.klinker.android.twitter_l
            </div>
            <div class="cell">
              Luke Klinker
            </div>
            <div class="cell">
              $1.49
            </div>
          </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh3.googleusercontent.com/UgItAs4ckdGHTXTVWNQ0NNrWy9rh6ya4BrjwAUPMsgMpwOI2NQ7N0zvfQ8eyb78NzHE=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>Watch Face - Minimal &amp; Elegant</h1>
              <span>com.stmp.minimalface</span>
            </div>
            <div class="cell">
              com.stmp.minimalface
            </div>
            <div class="cell">
              Studio eXtreme
            </div>
            <div class="cell">
              $1.59
            </div>
          </div>
        
          <div class="row">
            <div class="cell">
              <img src="https://lh3.googleusercontent.com/OZQhEH8B9PNGPkOlx714tIK0mEjMBHUEoJdb2bqUY01i9SKh8iI66j9RMRRzYCvKpYc=w340" width="50" height="50">
            </div>
            <div class="cell">
              <h1>Weather Live</h1>
              <span>com.apalon.weatherlive</span>
            </div>
            <div class="cell">
              com.apalon.weatherlive
            </div>
            <div class="cell">
              Apalon Apps
            </div>
            <div class="cell">
              $0.99
            </div>
          </div>
        
      </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题