Css div如何自动调整其大小并在其中定位元素_Css

Css div如何自动调整其大小并在其中定位元素

css

Css div如何自动调整其大小并在其中定位元素,css,Css,我是Css新手。我不知道这个问题是否有答案。实际上我有一页 <body> <div id="confirm"> <img src="images/help.png" alt="Help Icon"> <div id="message"> Are you sure you want to deletesadcasdsaduasudashdhasdoiasnidosanidoasydui

我是Css新手。我不知道这个问题是否有答案。实际上我有一页

<body>
    <div id="confirm">
        <img src="images/help.png" alt="Help Icon">
        <div id="message">
            Are you sure you want to  deletesadcasdsaduasudashdhasdoiasnidosanidoasyduiasnduasnoidnasidonasiodashydioasndoiasndioasdhioasydoiasndioashydasiodsaoidasd

        </div>

        <button>Ok</button>               
    </div>

</body>

现在，当我运行代码时，它会产生如下输出

现在我想知道，无论“messagediv”的文本有多大。“确认div”自动调整其大小和位置，以及其中所有元素的位置。像现在一样，我已经设置了“确认div”“最小高度=120”。如您所见，文本正在裁剪。不应裁剪文本，消息div的大小应根据文本大小自动增加。随着消息div size的增加，confirm div的高度也会增加，confirm div会调整其中的图像和按钮。最后，所有元素都应该在confirm Div中。或者您可以说消息和图像应该始终保持在Div的中心。我怎么做

谢谢

您的邮件文本没有空格，并且有一个很长的单词，您需要将所有这些单词拆分以自动调整div的大小

加

到CSS的#消息

更新

好的，这证明是困难的，但这对你来说是可行的，我添加了另一个div，并将图像放在其中，它的位置绝对不浮动，因此可以将图像居中。还必须添加另一个浮动的div，因为图像是为了强制消息位于正确的位置；这将达到目的

更新

谢谢：）但我还希望图像始终位于确认Div的中间。我该怎么做？我的意思是，随着我的消息Div的增加，图像顶部也应该移动。谢谢谢谢：）非常……谢谢：）但我想问另一件事……位置在css中重要吗。就像我有一个div，我首先定义宽度、高度属性，然后定义边界属性，然后定义float属性等等。然后我洗牌的立场。现在我定义了第一个过渡属性，然后是线性渐变属性，然后是边界属性，宽度和高度等等。这个东西在css中有什么不同吗。实际上，我问这个问题是因为我遵循了你的技巧，但在不同的地方定义了属性，居中不起作用，然后我复制粘贴你的技巧，一切正常。还有为什么#confirm img{}div不接受更改。就像在#确认imag div中设置的边框一样。但当我将其更改为

边框：1px纯红色。那就没有红色了。如果我将宽度从64更改为100width:100px。那就没有效果了。为什么会这样？谢谢你设置了margintop:-32px。如果我把它改成32，它就不是中心。为什么？32是高度64的一半。@Basit-你的宽度是正确的：100px，垂直对齐没有做任何事情，对不起，我在试着让它工作时把它们留在了里面。页边顶部：-32px是您正确注意到的高度的1/2，这使得顶部：50%和页边一起垂直居中固定的64px高图像。至于CSS块中属性的顺序是否重要，我已经做了一个快速搜索，但似乎没有。
#confirm {

    background-color: #ddd;
    display:block;
    width:400px;
    min-height:120px;
    position:absolute;
    border:1px solid #ccc;
    border-radius: 15px;
    -moz-border-radius: 15px;              /*FireFox*/
    -webkit-border-radius: 15px;           /*Opera, safari*/
    behavior: url(css/border-radius.htc);  /*IE*/
}

#confirm img {
    border:1px solid #ccc;
    margin:20px 20px 0 20px;
    float:left;
    width:64px;
}

#message {
    width: 280px;
    border:1px solid #ccc;
    float: left;
    white-space: normal;
    margin:20px 0 0 0;
    overflow: hidden;
}

#confirm button {
    position: relative;
    width:68px;
    margin:20px 180px 0 0;
    float:right;
}

word-wrap: break-word;