CSS center text (horizontally and vertically) insi

2018-12-31 00:25发布

站内问答 / HTML/CSS
988 23 5

I have a div set to display:block. (90px height and width) and I have some text inside.

I need the text to be aligned in the center both vertically and horizontally.

I have tried text-align:center, but it doesn't do the horizontal part so I tried vertical-align:middle but it didn't work.

Any ideas?

标签： html css
举报
23条回答
临风纵饮
2楼-- · 2018-12-31 00:59

This should be the right answer. Cleanest and simplest:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
查看更多
0人赞 添加讨论(0) 举报
临风纵饮
3楼-- · 2018-12-31 01:00 

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

查看更多
0人赞 添加讨论(0) 举报
公子世无双
4楼-- · 2018-12-31 01:01

Try the following example. I have added examples for each category: horizontal and vertical

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
有味是清欢
5楼-- · 2018-12-31 01:05

add the line display: table-cell; to your css for that div. only table cells support the vertical-align:middle; but you can give that [table-cell] definition to the div..

live example here: http://jsfiddle.net/tH2cc/

div{
    height:90px;
    width:90px;
    text-align:center;
    border:1px solid silver;
    display: table-cell; // this says treat this element like a table cell
    vertical-align:middle; //now we can center vertically like in a TD
}
查看更多
0人赞 添加讨论(0) 举报
旧人旧事旧时光
6楼-- · 2018-12-31 01:05

This worked for me 

.center-stuff{  
      text-align: center;
      vertical-align: middle;
      line-height: 230px;/*This should be the div height*/
    }
查看更多
0人赞 添加讨论(0) 举报
看风景的人
7楼-- · 2018-12-31 01:06

You can try the following methods:

1. If you have a single word or one line sentence, then the following code can do the trick.

Have a text inside a div tag and give it an id. Define the following properties for that id.

id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}

Note: Make sure the line-height property is same as the height of the division.

Image

But, if the content is more than one single word or a line then this doesn’t work. Also, there will be times when you cannot specify the size of a divison in px or %.(when the divison is really small and you want the content to be exactly in the middle)

2. To solve this issue, we can try the following combination of properties. 

id-name {
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed red;
}

Image

These 3 lines of code sets the content exactly in the middle of a division (Irrespective of the size of the display). The "align-items: center" helps in vertical centering while "justify-content: center" will make it horizontally centered.

Note: Flex does not work in all browsers. Make sure you add appropriate vendor prefixes for additional browser support.

查看更多
0人赞 添加讨论(0) 举报
1 2 3 4 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)