CSS - 所有垂直对齐方法都不起作用以及其他一些问题

Question

我正在尝试将verticaly中心设为div。但它没有用。

我现在正在努力工作超过6个小时，我只是不知道如何做到这一点。

这就是我想要创建的内容：

“Hallo.jpg”（红色箭头）必须以verticaly为中心。 这是我的最大问题。无论我尝试什么都行不通

“错误”（蓝色箭头）必须在底部。

铅笔必须与“Hallo.jpg”在同一条线上固定位置（260px来自“Hallo.jpg”）

HTML + CSS：（有一些内联样式，因为在更改元素时更容易开发）

#upload-InnerPanel{
        min-height: 300px;
        border: #2196F3 2px dashed;
    }

    .upload-ItemPanel{
        float: left; 
        width: calc(100% - 40px);
        margin: 10px;
        padding: 10px;
        background-color: #E0E0E0;
        max-height: 150px;
        box-shadow: 2.5px 2.5px #9E9E9E;
    }

    .upload-ImagePreview{
        width: 150px;
        max-height: 130px;
        object-fit: contain;
    }

    .upload-name{
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .upload-extension{
        width: 50px;
    }

    .upload-iconButton{
        float: right;
        height: 20px;
        width: 20px;
        border: none;
        text-decoration: none;
        background: red; /* normaly transparent but red for demo */
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .upload-editNameOpen{
        background-image: url('data:image/png;base64)
        //Not going to place the whole base64 string here.
    }

<div id="upload-InnerPanel">
        <div class="upload-ItemPanel">
            <img class='upload-ImagePreview' src='https://unsplash.it/300/300' style="float: left">
            <div style="float: right">X</div>
            <div style="float: left; width: 260px;">
                <span class="upload-name" id="imageName15">Hallo</span>
                <span class='upload-extension'>.jpg</span>
                <button class="upload-iconButton upload-editNameOpen" id="imageEdit15" title="Edit FileName"></button>
            </div>
            <div style="float: left; width: calc(100% - 200px)">error</div>
        </div>
    </div>

Answer 1

您希望摆脱所有float:left并使用display:inline-block进行垂直对齐。主要是vertical-align:middle，vertical-align:bottom表示错误。像这样：

.close { float:right; }
.upload-ImagePreview { 
    display:inline; 
    vertical-align:middle;
    width: 150px;
    max-height: 130px;
 }
.desc { 
    display:inline-block; 
    vertical-align:middle; 
    width:260px; 
    white-space:nowrap;
    margin-right:-264px;
 }
.error { display:inline; vertical-align:bottom; }
.upload-name { 
    vertical-align:middle;
    display:inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upload-extension { width: 50px; vertical-align:middle; }
.upload-iconButton {
    float:right;
    height: 20px;
    width: 20px;
    border: none;
    text-decoration: none;
    background: red; /* normally transparent but red for demo */
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    vertical-align:middle;
}
#upload-InnerPanel{
    min-height: 300px;
    border: #2196F3 2px dashed;
}
.upload-ItemPanel{
    margin: 10px;
    padding: 10px;
    background-color: #E0E0E0;
    max-height: 150px;
    box-shadow: 2.5px 2.5px #9E9E9E;
}

<div id="upload-InnerPanel">
  <div class="upload-ItemPanel">
    <img class='upload-ImagePreview' src='https://unsplash.it/300/300' alt="hallo">
    <div class="close">X</div>
    <div class="desc">
      <button class="upload-iconButton upload-editNameOpen" id="imageEdit15" title="Edit FileName"></button>
      <span class="upload-name" id="imageName15">Hallo</span>
      <span class='upload-extension'>.jpg</span>
    </div>
    <div class="error">error</div>
  </div>
</div>

Answer 2

您的CSS规则很好，特别是vertical-align: middle;是使您的图片居中的问题，问题出在这一行：

<img class='upload-ImagePreview' src='https://unsplash.it/300/300' style="float: left">

如果您移除float: left，您的图片将成为中心。

＆＃13;

＆＃13;

#upload-InnerPanel{
        min-height: 300px;
        border: #2196F3 2px dashed;
    }

    .upload-ItemPanel{
        float: left; 
        width: calc(100% - 40px);
        margin: 10px;
        padding: 10px;
        background-color: #E0E0E0;
        max-height: 150px;
        box-shadow: 2.5px 2.5px #9E9E9E;
    }

    .upload-ImagePreview{
        width: 150px;
        max-height: 130px;
        object-fit: contain;
    }

    .upload-name{
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .upload-extension{
        width: 50px;
    }

    .upload-iconButton{
        float: right;
        height: 20px;
        width: 20px;
        border: none;
        text-decoration: none;
        background: red; /* normaly transparent but red for demo */
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .upload-editNameOpen{
        background-image: url('data:image/png;base64)
        //Not going to place the whole base64 string here.
    }

＆＃13;

<div id="upload-InnerPanel">
        <div class="upload-ItemPanel">
            <img class='upload-ImagePreview' src='https://unsplash.it/300/300'>
            <div style="float: right">X</div>
            <div style="float: left; width: 260px;">
                <span class="upload-name" id="imageName15">Hallo</span>
                <span class='upload-extension'>.jpg</span>
                <button class="upload-iconButton upload-editNameOpen" id="imageEdit15" title="Edit FileName"></button>
            </div>
            <div style="float: left; width: calc(100% - 200px)">error</div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;