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

我有一个css，有一个text-align: center，因为我想我的大多数元素居中，但有一个元素，我想朝左上角。如何对齐div中的左元素与居中对齐

我可以通过更改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>

来源

2017-06-20 Luke

你正在使用dropBox在HTML和在你写的保管箱的保险箱。 – LKG

只是使图像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>

来源

2017-06-20 12:20:08 Johannes

谢谢是的，有帮助。然而，由于img块，一些投入现在进一步下降。 – Luke

“输入”是什么意思？ – Johannes

img块占用100％的宽度，所以后面的元素将在下面。如果你不想这样做，你可以分配图像的位置：绝对和宽度和高度设置，并将'position：relative'分配给它的父级'.dropBox'。这会将图像放置在左上角，但它可能与其他元素重叠。 – Johannes

-2

尝试仅仅没有文字对齐：

<img align="left">

来源

2017-06-20 12:15:44 Hajrudin

在审查代码时，很难拿起来，比如他们想要改变对齐方式。最好使用CSS进行样式设计。 – marcellothearcane

他可以把他的css img {align：left; } – Hajrudin

你的例子没有显示。 OP可能不知道*他们可以将它放入他们的CSS中。 – marcellothearcane

请与顶部位置属性的尝试和左图像。

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

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

来源

2017-06-20 12:18:19 santosh

请看下面。你的HTML中的保险箱类拼写错误。

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

来源

2017-06-20 12:19:49 Gerard

它的代码的权利，但我错过了写在这里写感谢感谢注意 – Luke

-1

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

.dropBox中的所有内容都将按照最初预期的方式居中，但“不”是img元素。

此方法不会像其他人所暗示的那样影响其他元素或使用display或position的布局。

来源

2017-06-20 12:20:33 Rob

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

回答

相关问题