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

请尝试使用顶部和左侧的位置属性到图像。

if-let

Answer 2

请参阅下文。您的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 3

只需将图片设为block元素 - 没有必要（见下文）

＆＃13;

img {
  display: block;
}

.dropBox {
  text-align: center;
}

＆＃13;

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

＆＃13;

Answer 4

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

.dropBox内的所有内容都会按原定的目标居中，但＆＃34;不是＆＃34; img元素。

此方法不会影响其他元素或使用display或position的布局。

Answer 5

尝试仅在没有文字的情况下对齐：

<img align="left">

如何将div中的左元素与居中对齐对齐

5 个答案: