时间戳

首页 > 解决方案 > 要设计的样式元素

html - 要设计的样式元素

问题描述

（请参阅附图以供参考）我想设置一个元素的样式，使其左侧有图像，右侧有文本，文本在中间垂直对齐。我对 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，我希望能够理解做了什么以及为什么，所以如果有人可以帮助我在谷歌搜索的内容中，或者指向我可以阅读有关如何具体执行此操作的某个地方，我将不胜感激。

在此处输入图像描述

标签： htmlcss

解决方案

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 作为弹性项目。您将不得不用 img 替换 div 并border-radius: 10px;帮助您获得圆角。

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

推荐阅读