块大小和文本居中答案

【问题标题】：Block size and text centering块大小和文本居中
【发布时间】：2021-03-17 16:59:56
【问题描述】：

我尝试将三个按钮排列成一个块。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/>

<div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center">
   <div class="bg-blue-100 hover:bg-blue-400 h-images ">
       <a class=" "
           href="#">Button 1</a>
   </div>
   <div class="">
       <a href="#">Button 2</a>
   </div>
   <div class="">
       <a href="#">button 3</a>
   </div>
</div>

图片是tailwind.config.js文件中设置的大小，原来是810px，如何让按钮变成这张图片的大小，以及块中心的文字？尝试设置自动高度h-100，h-full，但它不起作用。只有 h-screen 起作用，但是按钮变成屏幕的大小，而不是它们所在的块。

【问题讨论】：

你的问题有点不清楚。您能否添加预期的快照。

标签： html css tailwind-css

【解决方案1】：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/>

<div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center" style="align-items:center;">
   <button class="bg-blue-100 hover:bg-blue-400 h-images " style="min-width:auto; margin: auto; min-height:810px;">
       <a class=" "
           href="#">Button 1</a>
   </button>
   <div class="">
       <a href="#">Button 2</a>
   </div>
   <div class="">
       <a href="#">button 3</a>
   </div>
</div>

如果您不介意内联 CSS，那么您可以尝试使用此代码将按钮的高度设置为 810 像素，正如您所说的图像的大小（高度）。宽度设置为自动，以便根据您的图像大小进行调整。

【讨论】：

【解决方案2】：

有点不清楚。我想这就是你所需要的

.d-block{
    display: block;
}
.button{
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}
.button:hover{
  backround-color:#d7eeff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/>

<div class="d-block">
   <div class="bg-blue-100 hover:bg-blue-400 h-images button">
       <a class=""
           href="#">Button 1</a>
   </div>
   <div class="button hover:bg-blue-400">
       <a class="" href="#">Button 2</a>
   </div>
   <div class="button hover:bg-blue-400">
       <a class="" href="#">button 3</a>
   </div>
</div>

【讨论】：

【解决方案3】：

使用 "display: inline" 使按钮水平对齐，或使用 "display:inline-flex" 使所有按钮也根据宽度包含相同的宽度屏幕。

//CSS

.btn-style{min-width:auto; margin: auto; min-height:210px;width:32.9%;}

//HTML

<div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center" style="display:inline; align-items:center;">
   <button class="bg-blue-100 hover:bg-blue-400 h-images btn-style">
       <a class=""
           href="#">Button 1</a>
   </button>
   <button class="bg-blue-100 hover:bg-blue-400 h-images btn-style">
       <a href="#">Button 2</a>
   </button>
   <button class="bg-blue-100 hover:bg-blue-400 h-images btn-style">
       <a href="#">button 3</a>
   </button>
</div>

【讨论】：