Ausrichten der Beschriftung links von vertikal zentriertem Bild

Question

Im folgenden Beispiel gibt es eine einfache Möglichkeit, die Beschriftung an der linken Kante des zentrierten Bildes auszurichten?

Derzeit sieht das Display wie folgt aus:

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

ich es wie dieses

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

Answer 1

Sie tun könnte es so aussehen möchten.

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

Answer 2

Die text-align Eigenschaft, um das "Bild" auf die Mitte ausgerichtet ist, wie es als 'Zentrum' angegeben ist.

Also ändern Sie es auf "links" oder geben Sie es überhaupt nicht an.

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