将复选框与其他 div 上的文本垂直对齐

【问题标题】：Vertically align checkbox with text on other divs将复选框与其他 div 上的文本垂直对齐
【发布时间】：2018-04-24 23:49:00
【问题描述】：

我正在尝试为某些事件制作图例，我需要将它们放在 4 列和一些行中。

我很难将复选框与其他 div 中的文本对齐。我必须进行哪些更改才能使其正常工作？

.leg-col {
    display: inline-block;
    margin-left: 5px;
}

div.leg-chk, div.leg-cod, div.leg-des, div.leg-day{
    display: inline-block;
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    box-shadow: -1px 1px #f2f2f2;
    color: #848d95;
    padding: 4px;
    margin-bottom: 5px; 
    height: 14px;
    font-size: 12px;                
}

div.leg-chk, div.leg-cod, div.leg-day {
    width: 20px; 
    text-align: center;
}

div.leg-des {
    width: 120px; 
    text-align: left;
}            

div.leg-chk{
    vertical-align: bottom;
}
<div id="col1" class="leg-col">
    <div id="leg-evt1" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event1"><span>E1</span></div><!--
        --><div class="leg-des"><span>Event1</span></div><!--
        --><div class="leg-day"><span>1</span></div>
    </div>
    <div id="leg-evt2" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event2"><span>E2</span></div><!--
        --><div class="leg-des"><span>Event2</span></div><!--
        --><div class="leg-day"><span>2</span></div>
    </div>
</div>
<div id="col2" class="leg-col">
    <div id="leg-evt3" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event3"><span>E3</span></div><!--
        --><div class="leg-des"><span>Event3</span></div><!--
        --><div class="leg-day"><span>3</span></div>
    </div>
    <div id="leg-evt4" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event4"><span>E4</span></div><!--
        --><div class="leg-des"><span>Event4</span></div><!--
        --><div class="leg-day"><span>4</span></div>
    </div>
</div>

问候， 埃利奥·费尔南德斯

【问题讨论】：

  • 它工作得很好，但我想知道是否有更好的方法来做这种类型的布局？

标签： jquery checkbox vertical-alignment


【解决方案1】：

您可以将以下属性添加到您的 CSS：

input.leg-chk {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

div.leg-chk {
  position: relative;
  height: 14px;
}

在这种情况下，您的复选框将使用边距垂直和水平居中。这是工作的 sn-p：

.leg-col {
    display: inline-block;
    margin-left: 5px;
}

div.leg-chk, div.leg-cod, div.leg-des, div.leg-day{
    display: inline-block;
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    box-shadow: -1px 1px #f2f2f2;
    color: #848d95;
    padding: 4px;
    margin-bottom: 5px; 
    height: 14px;
    font-size: 12px;                
}

div.leg-chk, div.leg-cod, div.leg-day {
    width: 20px; 
    text-align: center;
}

div.leg-des {
    width: 120px; 
    text-align: left;
}

input.leg-chk {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

div.leg-chk {
  position: relative;
  height: 14px;
}

div.leg-chk{
    vertical-align: bottom;
}
<div id="col1" class="leg-col">
    <div id="leg-evt1" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event1"><span>E1</span></div><!--
        --><div class="leg-des"><span>Event1</span></div><!--
        --><div class="leg-day"><span>1</span></div>
    </div>
    <div id="leg-evt2" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event2"><span>E2</span></div><!--
        --><div class="leg-des"><span>Event2</span></div><!--
        --><div class="leg-day"><span>2</span></div>
    </div>
</div>
<div id="col2" class="leg-col">
    <div id="leg-evt3" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event3"><span>E3</span></div><!--
        --><div class="leg-des"><span>Event3</span></div><!--
        --><div class="leg-day"><span>3</span></div>
    </div>
    <div id="leg-evt4" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event4"><span>E4</span></div><!--
        --><div class="leg-des"><span>Event4</span></div><!--
        --><div class="leg-day"><span>4</span></div>
    </div>
</div>

更新（更多方式）

如果你有固定高度的复选框及其容器，你可以硬编码margins:

input.leg-chk {
  margin: 1px 0;
}

div.leg-chk {
  height: 14px;
}


.leg-col {
    display: inline-block;
    margin-left: 5px;
}

div.leg-chk, div.leg-cod, div.leg-des, div.leg-day{
    display: inline-block;
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    box-shadow: -1px 1px #f2f2f2;
    color: #848d95;
    padding: 4px;
    margin-bottom: 5px; 
    height: 14px;
    font-size: 12px;                
}

div.leg-chk, div.leg-cod, div.leg-day {
    width: 20px; 
    text-align: center;
}

div.leg-des {
    width: 120px; 
    text-align: left;
}

input.leg-chk {
  margin: 1px 0;
}

div.leg-chk {
  height: 14px;
}

div.leg-chk{
    vertical-align: bottom;
}
<div id="col1" class="leg-col">
    <div id="leg-evt1" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event1"><span>E1</span></div><!--
        --><div class="leg-des"><span>Event1</span></div><!--
        --><div class="leg-day"><span>1</span></div>
    </div>
    <div id="leg-evt2" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event2"><span>E2</span></div><!--
        --><div class="leg-des"><span>Event2</span></div><!--
        --><div class="leg-day"><span>2</span></div>
    </div>
</div>
<div id="col2" class="leg-col">
    <div id="leg-evt3" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event3"><span>E3</span></div><!--
        --><div class="leg-des"><span>Event3</span></div><!--
        --><div class="leg-day"><span>3</span></div>
    </div>
    <div id="leg-evt4" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event4"><span>E4</span></div><!--
        --><div class="leg-des"><span>Event4</span></div><!--
        --><div class="leg-day"><span>4</span></div>
    </div>
</div>

如果你喜欢 Flexbox，这里有一个 Flexbox 解决方案：

.event {
  display: flex;
  flex-direction: row;
}

div.leg-chk {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 22px;
  height: 22px;
  flex-grow: 0;
  padding: 0;
}

input.leg-chk {
  margin-top: 0;
  margin-bottom: 0;
}


.leg-col {
    display: inline-block;
    margin-left: 5px;
}

div.leg-chk, div.leg-cod, div.leg-des, div.leg-day{
    display: inline-block;
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    box-shadow: -1px 1px #f2f2f2;
    color: #848d95;
    padding: 4px;
    margin-bottom: 5px; 
    height: 14px;
    font-size: 12px;                
}

div.leg-chk, div.leg-cod, div.leg-day {
    width: 20px; 
    text-align: center;
}

div.leg-des {
    width: 120px; 
    text-align: left;
}

.event {
  display: flex;
  flex-direction: row;
}

div.leg-chk {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 22px;
  height: 22px;
  flex-grow: 0;
  padding-top: 0;
  padding-bottom: 0;
}

input.leg-chk {
  margin-top: 0;
  margin-bottom: 0;
}

div.leg-chk{
    vertical-align: bottom;
}
<div id="col1" class="leg-col">
    <div id="leg-evt1" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event1"><span>E1</span></div><!--
        --><div class="leg-des"><span>Event1</span></div><!--
        --><div class="leg-day"><span>1</span></div>
    </div>
    <div id="leg-evt2" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event2"><span>E2</span></div><!--
        --><div class="leg-des"><span>Event2</span></div><!--
        --><div class="leg-day"><span>2</span></div>
    </div>
</div>
<div id="col2" class="leg-col">
    <div id="leg-evt3" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event3"><span>E3</span></div><!--
        --><div class="leg-des"><span>Event3</span></div><!--
        --><div class="leg-day"><span>3</span></div>
    </div>
    <div id="leg-evt4" class="event">
        <div class="leg-chk"><input type="checkbox" class="leg-chk" checked></div><!--
        --><div class="leg-cod ev-event4"><span>E4</span></div><!--
        --><div class="leg-des"><span>Event4</span></div><!--
        --><div class="leg-day"><span>4</span></div>
    </div>
</div>

【讨论】：

  • 它工作得很好，但我想知道是否有更好的方法来做这种类型的布局？
  • @ElioFernandes，我已经用更多方法更新了答案
  • 感谢您所做的一切。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-12-09
  • 2019-10-23
  • 2012-04-06
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode