要设计的样式元素答案

【问题标题】：Styling elements to design要设计的样式元素
【发布时间】：2021-09-02 06:18:11
【问题描述】：

（请参阅附图以供参考）我想设置一个元素的样式，使其左侧有图像，右侧有文本，文本在中间垂直对齐。我对 CSS 非常缺乏经验，不知道从哪里开始。我已经尝试在网上查找，但问题是我不确定要搜索什么。

这是我目前使用的 HTML：

<div class="flex w-full h-screen items-center justify-center text-center" id="app">
        <div style="border-color: #8FC8E7; background-color: #F5F5F9;"
             @dragover="dragover"
             @dragleave="dragleave"
             @drop="drop">

            <input type="file"
                   multiple name="fields[assetsFieldHandle][]"
                   id="assetsFieldHandle"
                   class="w-px h-px opacity-0 overflow-hidden absolute ajaxFileUpload"
                   style="visibility: hidden"
                   @change="onChange"
                   ref="file" accept=".pdf,.jpg,.jpeg,.png" />

            <label for="assetsFieldHandle"
                   class="block cursor-pointer"
                   style="color: #4E5359">
                <div>
                    Drag and drop an image into this box, or <span style="color: #65B3DD;">click here</span> to select a file.
                </div>
            </label>
        </div>
</div>

如果有人能指出我正确的方向，我将不胜感激 - 我不是在找人为我写 CSS，我希望能够理解做了什么以及为什么，所以如果有人可以帮助我在谷歌上搜索什么，或者指出我可以阅读具体如何执行此操作的地方，我将不胜感激。

【问题讨论】：

你应该使用 flexbox。

标签： html css

【解决方案1】：

CSS：

.flex-container {
   display: flex;
   background-color: DodgerBlue;
   border-radius: 10px; 
 }

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  border-radius: 10px;
}

.flex-container > p{
  display: flex;
  align-items: center;
}

HTML：

<div class="flex-container">
  <div>1</div>
  <p>A Flexible Layout must have a parent element with the property set to</p> 
</div>

我们正在创建一个弹性容器，使用display:flex。这个容器包含一个 div 和 p 作为弹性项目。您必须将 div 替换为 img，border-radius: 10px; 将帮助您获得圆角。

display: flex; align-items: center; 帮助您垂直居中元素。

【讨论】：

为了让它垂直对齐，我使用了 align-self: center 代替， align-items 出于某种原因无法正常工作。感谢您的帮助！

【解决方案2】：

您需要将 display: flex; 添加到放置输入的 div 中，并更改 flex-direction: row; 以便将它们显示在行中

一篇关于 flexbox 的好文章在：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

使用 flex 让我得到了整理，非常感谢您指点我该指南！