How can I centre left aligned text even when it wraps?

后端 未结 5 507
栀梦
栀梦 2020-12-08 07:18

I need to centre a block of left aligned text within a div, but I need the visual width of the text block to be centred not the block itself.

In many cases this may

5条回答
  •  南笙
    南笙 (楼主)
    2020-12-08 07:32

    I know this is old but it has not been answered. It can be done with calc() vh and vw(viewport units), at least, and some math. The trick seems to be setting the left and top to center manually somewhat. I used viewport units for their accuracy and ever changing effect.

        .clr	{ clear:both; }
        .bg666	{ background:#666;}  
        .bgf4	{ background: #f4f4f4; }
        .hv60	{ height: 60vh; }
        .hv50	{ height: 50vh; }
        .wv60	{ width: 60vw; }
        .wv50	{ width: 50vw; }
        .tlset	{ position:relative; left: 30px; top: 30px; }
        .true_cntr_inner { position:relative; left: calc(60vw - 50vw - 5vw);  top: calc(60vh - 50vh - 5vh); } /* left = (60% - 50% of inner block / 2);*/
        
    this is some text that spans acrossed 50% of the viewport. I state the obvious because I believe people can see the obvious and I was wrong a lot. Now it has become somewhat of a habit like bad spelling so forgive me.

    I was looking for a solution to center and resize my text containing DIV on window resize. I ran across this post and found my workaround after realizing there was an issue using the regular CENTER method. I hope it helps.

提交回复
热议问题