對齊垂直居中圖像的標題左邊

在下面的示例中，是否有一種簡便的方法將標題與居中圖像的左邊緣對齊？對齊垂直居中圖像的標題左邊

目前顯示的信息如下：

 ____________________ 
    |     | 
    |     | 
    |     | 
    |     | 
    |____________________| 
This is my caption

我想它看起來像這樣

____________________ 
|     | 
|     | 
|     | 
|     | 
|____________________| 
This is my caption

.container{ 
 
    width: 100%; 
 
    height:200px; 
 
} 
 

 
img{ 
 
    width: 400px; 
 
    height:50px 
 
} 
 

 
.figure{ 
 
    text-align: center; 
 
} 
 

 
.caption{ 
 
    text-align: left; 
 
}

<div class="container"> 
 
<figure class="figure"> 
 
<img src=""/> 
 
<figcaption class="caption"> 
 
This is my caption. 
 
</figcaption> 
 
</figure>

來源

2017-02-16 c-bro

如果你想讓它左對齊，爲什麼'.figure'居中對齊？ – RobertAKARobin

我想讓圖像與父容器的中心對齊，但是它下面的標題要與居中圖像的左邊緣對齊。 –

你可以不喜歡這樣。

.container{ 
 
    width: 100%; 
 
    height:200px; 
 
} 
 

 
#imgWrap 
 
{ 
 
    display: inline-block; 
 
} 
 
img{ 
 
    width: 400px; 
 
    height:50px 
 
} 
 

 
.figure{ 
 
    text-align: center; 
 
} 
 

 
.caption{ 
 
    text-align: left; 
 
}

<div class="container"> 
 
    <figure class="figure"> 
 
     <div id='imgWrap'> 
 
      <img src=""/> 
 
      <figcaption class="caption"> 
 
       This is my caption. 
 
      </figcaption> 
 
     </div> 
 
    </figure> 
 
</div>

來源

2017-02-16 18:25:53 user6003859

的文本對齊，因爲它被指定爲 '中心'屬性對齊「的數字」到中心。

因此，將其改爲「左」或根本不指定它。

.container{ 
 
    width: 100%; 
 
    height:200px; 
 
} 
 

 
img{ 
 
    width: 400px; 
 
    height:50px 
 
} 
 

 
.figure{ 
 
    
 
} 
 

 
.caption{ 
 
    
 
}

<div class="container"> 
 
<figure class="figure"> 
 
<img src=""/> 
 
<figcaption class="caption"> 
 
This is my caption. 
 
</figcaption> 
 
</figure>

來源

2017-02-16 18:28:26

對不起，我想保持圖像中心對齊。 –

對齊垂直居中圖像的標題左邊

回答

相關問題