Making the centered box filled with dynamic text

HTML & CSS
1

The portion in the yellow box given in below page ink should be in center and it should be increased or decreased according to the text. In that case i do not want to use width:px because if i use width:px then i can not write text with different length.

page link: http://dot.kr/z-test/01/test4.php

2

What does that mean? Should the yellow area become taller as text is added or wider as text is added? How much should it be allowed to change?

Did you read the following resources as requested?

(1) Writing the txt both vertically and horizentally centered - #2 by ronpat

(2) https://www.sitepoint.com/community/users/joon1/activity

size=+1[/size] https://www.sitepoint.com/community/t/pink-box-spreading-enough-having-breaks-in-text-in-yellow-box/212679

3

Try this:

<div style="color:black; display:table; text-align:center; background:cyan;">
    
    <div style="display:table-cell; background:yellow; display:inline-block;">
        <p> dynamic text </p>
    </div>
    
</div>
1 Like
4

thanks a lot! After adding width: its working fine.

5

You don’t need a width just use display:table and auto margins to center the element.

<div class="wrap"><div class="content">Dynamic content</div></div>

CSS:

.wrap{margin:20px;background:yellow}
.content{display:table;margin:auto;background:cyan}

Full example.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap{margin:20px;background:yellow}
.content{display:table;margin:auto;background:cyan}
</style>
</head>

<body>
<div class="wrap"><div class="content">Dynamic content</div></div>
<div class="wrap"><div class="content">Dynamic content with more text</div></div>
<div class="wrap"><div class="content">Dynamic</div></div>
<div class="wrap"><div class="content">Dynamic content</div></div>
</body>
</html>
1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.