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

【问题标题】：CSS - All vertical aligning methods not working and some other problemsCSS - 所有垂直对齐方法都不起作用和其他一些问题
【发布时间】：2017-09-05 15:07:34
【问题描述】：

我正在尝试使一些 div 垂直居中。但它不起作用。

我现在已经连续工作了 6 个多小时，我只是不知道我该怎么做。

这就是我想要创建的：

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

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

铅笔必须与“Hallo.jpg”位于同一行的固定位置（距离“Hallo.jpg”260px）

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>

【问题讨论】：

我肯定会使用 flex 布局而不是 float 并将代码减少 2/3。除非必须支持 IE9...
如果你尝试使用 flexbox 而不是浮动，你会帮自己一个大忙。有关于浏览器支持的问题，但它比object-fit 可用得多，后者仅在最新版本的 Edge 中支持，而不是任何版本的 IE，因此这似乎不是问题。 (caniuse)
好吧，我尝试了一个 flex 布局，但似乎没有让它工作。我实际上是从 flexbox 开始的，因为我知道它更好，但我只是没有让它工作。使用 flexbox 将图像拉伸到完整的 150 像素，将图像设置在 middel 中。并在底部和顶部留下很大的空隙。我希望外部 div 延伸到内容，但我没有让它工作。
您想要图片下方的error 吗？图片名称和扩展名可以在同一个html元素中吗？
错误信息必须在图片侧面的底部，并且图片名称和扩展名不能在同一个元素中

标签： html css

【解决方案1】：

您想摆脱所有float:lefts 并使用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>

【讨论】：

【解决方案2】：

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

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

如果您删除float: left，您的图像将居中。

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

【讨论】：