div内の左の要素を中央揃えで整列する方法

Question

ほとんどの要素を中央に配置したいので、私はtext-align: centerのCSSを持っていますが、左上にしたい要素があります。

margin-right: ??pxを変更するとできます。しかし、私はこれが最善の方法ではないと感じています。より良い方法があります左上要素の内側にtext-align: center div。

dropboxは、text-align: centerを含む。私はimgをの左上にします。

img { 
 
    text-align: left;/*(does not work)*/ 
 
    margin-right: 95px;/*(works but dont think is the best approach)*/ 
 
} 
 

 
.dropbox { 
 
    text-align: center; 
 
}

<div class="dropBox"> 
 
    <img src="pdf.jpg" id="pdf"/><br> 
 
</div>

Answer 1

だけblock要素画像を作成する - 必要な何もない（下記参照）

img { 
 
    display: block; 
 
} 
 

 
.dropBox { 
 
    text-align: center; 
 
}

<div class="dropBox"> 
 
    <img src="http://placehold.it/50x50" id="pdf"><br> 
 
    some more text<br> 
 
    some more text<br> 
 
    some more text<br> 
 
    some more text<br> 
 
</div>

Answer 2

テキストなしで揃えるだけ試してみてください。

<img align="left"> 

Answer 3

トップのための位置属性で試してみて、イメージに委ねてください。

img { 
     position:absolute; 
     top : 15px; 
     left : 15px; 
    } 

    .dropbox { 
     text-align: center; 
     position : relative; 
    } 

Answer 4

以下を参照してください。あなたのHTMLのdropboxクラスは間違って綴られていました。

.leftAlign { 
 
    text-align: left; 
 
} 
 

 
.dropbox { 
 
    width: 300px; /* only for demo */ 
 
    text-align: center; 
 
}

<div class="dropbox"> 
 
    <p class="leftAlign"> 
 
    <img src="http://placehold.it/100" id="pdf"> 
 
    </p> 
 
    <p>Dummy text</p> 
 
</div>

Answer 5

.dropBox :not(img) { text-align:center; }

.dropBox内のすべてが元々意図されたとおりに中央に配置されますが、「非」img要素になります。

この方法は、他の要素に影響を与えません。また、displayまたはpositionを使用するようにレイアウトすることもできます。