发表新帖
发表新帖

Vertical align text in block element

后端 未结
关注
9 937
盖世英雄少女心
盖世英雄少女心 2020-12-04 09:53

I know vertical alignment is always asked about, but I don\'t seem to be able to find a solution for this particular example. I\'d like the text centered within the element,

相关标签:
9条回答
  • 春和景丽
    2020-12-04 10:39

    DO NOT USE THE 4th solution from top if you are using ag-grid. It will fix the issue for aligning the element in middle but it might break the thing in ag-grid (for me i was not able to select checkbox after some row). Problem is not with the solution or ag-grid but somehow the combination is not good.

    DO NOT USE THIS SOLUTION FOR AG-GRID

    li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}

li a:after {
    content:"";
    display: inline-block;
    width: 1px solid transparent;
    height: 100%;
    vertical-align: middle;
}
    0 讨论(0)
  • 遇见更好的自我
    2020-12-04 10:40

    Here's the general solution using just CSS, with two variations. The first centers vertically in the current line, the second centers within a block element.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <ul>
        <li>
            line one
        </li>
        <li>
            <span style="display: inline-block; vertical-align: middle">line two dot one
                <br />
                line two dot two</span>
        </li>
        <li>
            line three
        </li>
    </ul>
    <div style="height: 200px; line-height: 200px; border-style: solid;">
            <span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
                <br />
                line two dot two</span>
    </div>
</body>
</html>

    As I understand it, vertical-align applies only to inline-block elements, e.g., <img>. You have to change an element's display attribute to inline-block for it to work. In the example, the line height expands to fit the span. If you want to use a containing element, such as a <div>, set the line-height attribute to be the same as the height. Warning, you will have to specify line-height: normal on the contained <span>, or it will inherit from the containing element.

    0 讨论(0)
  • 傲寒
    2020-12-04 10:43

    You can also try

    a {
  height:100px;
  line-height:100px;
}
    0 讨论(0)
  • 挽巷
    2020-12-04 10:52

    You can try the display:inline-block and :after.Like this:

    HTML

    <ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

    CSS

    li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}
li a:after {
  content:"";
  display: inline-block;
  width: 1px solid transparent;
  height: 100%;
  vertical-align: middle;
}

    Please view the demo.

    0 讨论(0)
  • 逝去的感伤
    2020-12-04 10:53

    You can also use inline-table alongside table-cell if you want to center your items vertically and horizontally. Below an example of using those display properties to make a menu:

    .menu {
  background-color: lightgrey;
  height: 30px; /* calc(16px + 12px * 2) */
}

.menu-container {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
}

.menu-item {
  list-style-type: none;
  display: inline-table;
  height: 100%;
}

.menu-item a {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration: none;
  color: initial;
}

.text-upper {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}
    <header>
  <nav class="menu">
    <ul class="menu-container">
      <li class="menu-item text-upper text-bold"><a href="javascript:;">StackOverflow</a></li>
      <li class="menu-item"><a href="javascript:;">Getting started</a></li>
      <li class="menu-item"><a href="javascript:;">Tags</a></li>
    </ul>
  </nav>
</header>

    It works by setting display: inline-table; to all the <li>, and then applying display: table-cell; and vertical-align: middle; to the children <a>. This gives us the power of <table> tag without using it.

    This solution is useful if you do not know the height of your element.

    The compatibilty is very good (relative to caniuse.com), with Internet Explorer >= 8.

    0 讨论(0)
  • 野性不改
    2020-12-04 10:54

    According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).

    enter image description here

    All you need to do is:

    display: flex;
align-items: center;

    See this fiddle.

    0 讨论(0)
 看不清?
提交回复
热议问题