Question

在获取正确的css时遇到一些问题，无法按照我想要的方式对齐文本。

。 html 文件

<section id='a'>
    <div class='b'>111</div>
    <div class='b'>222</div>
    <div class='b'>33333</div>
    <div class='b'>444444 4444</div>
    <div class='b'>55555</div>
</section>

。 css 档案

#a {
    position: fixed;
    top: 50%;
    left: 5vw;
    transform: translateY(-50%);
}
.b {
    position: relative;
    margin: 5px;
    height: 56px;
    width: 56px;
    text-align: center;
    vertical-align: middle;
    line-height: 56px;
    font-size: 14pt;
    color: #696969;
    background-color: #D3D3D3;
    border-radius: 30px;
    cursor: pointer;
    border: 2px solid #000000;
}

除 div 4 外，其他内容显示正常，其中文字较长，延伸到外面。

我添加了一个类来更改行高，以便文本换行：

    <div class='b c'>444444 4444</div>

.c {
    line-height: 28px;
}

我想减少线条之间的间距，以便文字在圆圈内更合适：

.c {
    line-height: 18px;
}

我喜欢间距，但想将文字向下移动到中心，所以我在边框内添加了一些填充：

.c {
    line-height: 18px;
    padding-top: 6px;
    padding-bottom: 0px;
}

圆形扩展为更多椭圆形状。

高度明确表示为56px。

边距为5px（顶部和底部为x2）：10px

边框为2px（顶部和底部为x2）：4px

内容为两行包装文字，行高为18px（x2）：36px

添加6px的填充导致56px这是指定的高度，所以我不清楚为什么填充会扩大高度。

稍微考虑一下线高，但我并不清楚它是如何工作的。我尝试了许多其他设置和值，但没有任何能给我我想要的结果。

Chrome，Firefox，Opera和Safari中的行为相同。

对我做错的任何想法，指示或澄清？

Answer 1

无论子元素的属性如何，

display: table;和display: table-cell;都是垂直对齐的理想解决方案。

＆＃13;

.container {
  display: table;
  border: 1px solid red;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

.one {
  width: 100px;
  height: 100px;
}

.two {
  width: 200px;
  height: 200px;
}

.three {
  width: 75px;
  height: 75px;
}

＆＃13;

<div class="container one">
  <span>some text</span>  
</div>

<div class="container two">
  <span>some other text</span>  
</div>

<div class="container three">
  <span>some text that stretches longer</span>  
</div>

＆＃13;

Answer 2

padding计入元素大小。因此height: 56px和padding-top: 6px会使元素62px变高。只需将该元素的height调整为50px（所需高度减去垂直填充，56 - 6）。

另一种选择是将box-sizing更改为border-box（默认值为content-box）。这将使padding和border-width和width - https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

考虑height和

//  RegisterViewController.swift
//  SafeUtils
//
//  Created by DJtech on 7/26/16.
//  Copyright © 2016 DJtech. All rights reserved.
//

import Cocoa

class RegisterViewController: ViewController {

    @IBOutlet weak var UserNameTextF: NSTextField!
    @IBOutlet weak var UserPasswordTextF: NSSecureTextField!
    @IBOutlet weak var UserVerifyPassTextF: NSSecureTextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do view setup here.
    }

    // When Register Button Tapped
    @IBAction func RegisterBTNTPD(sender: AnyObject) {
        //These are the parts of code that have the error. Error: Value of type 'NSTextField' has no member 'text'
        let Username = UserNameTextF.text
        let Password = UserPasswordTextF.text
        let veriPass = UserVerifyPassTextF.text


        // Are there empty fields?


        // Store User Data

        // Confirm Registration Message

    }


}

Answer 3

你可以这样做：

.b {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

并添加一个包含

的包装器

transform-style: preserve-3d;

Answer 4

div的大小为56x56像素。添加任何填充（padding-top: 6px）后，它将累加到56px，这将导致62px。你的div（圆圈）将成为一个鸡蛋。您需要做的是在div上设置box-sizing: border-box。

box-sizing的初始值是内容框。您输入的高度是内容的高度。任何填充和边框都不包含在该值中，并将扩展div。另一方面，box-sizing: border-box即使在输入填充后也会保持div 56px。它会降低内容的高度并使盒子保持在同一高度。

#a {
    position: fixed;
    top: 50%;
    left: 5vw;
    transform: translateY(-50%);
}
.b {
    position: relative;
    margin: 5px;
    height: 56px;
    width: 56px;
    text-align: center;
    vertical-align: middle;
    line-height: 56px;
    font-size: 14pt;
    color: #696969;
    background-color: #D3D3D3;
    border-radius: 30px;
    cursor: pointer;
    border: 2px solid #000000;
}
.c {
    line-height: 28px;
    line-height: 18px;
    box-sizing: border-box;
    padding-top: 9px;
}

<section id='a'>
    <div class='b'>111</div>
    <div class='b'>222</div>
    <div class='b'>33333</div>
    <div class='b c'>444444 4444</div>
    <div class='b'>55555</div>
</section>

Answer 5

您可以使用flexbox，无需计算行数并根据大小匹配填充，这可以动态完成。

#a {
  position: fixed;
  top: 50%;
  left: 5vw;
  transform: translateY(-50%);
}
.b {
  position: relative;
  margin: 5px;
  height: 56px;
  width: 56px;
  font-size: 14pt;
  color: #696969;
  background-color: #D3D3D3;
  border-radius: 30px;
  cursor: pointer;
  border: 2px solid #000000;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

<section id='a'>
    <div class='b'>111</div>
    <div class='b'>222</div>
    <div class='b'>33333</div>
    <div class='b'>444444 4444</div>
    <div class='b'>55555</div>
</section>

CSS - 包装文本的行高填充不是我所期望的

5 个答案: