Can div single line can be centered based on the line length.?

HTML & CSS
1

Is there any way to create a div with either of following features:

  1. one line and center align in the context of content (by default it is centered based on screen size)
    I have tried this, http://jsfiddle.net/s4n7h0/so9ror2d/1/ But the center is not happening based on the line length. Also some contents overflowing to the left side is not viewable.
  2. div that resize the font size based on length. So the text font will keep decreasing as it fits into whole screen size, I can then use a zoom bar or something to play with it.

Any suggestion ?

2

I should think that at least with JS should be possible. Unfortunately for me, I have to get acquataince with CSS3 again because I haven’t worked with it lately and I forgot most of what I used to know. That is, if I ever new something :smiley:

I agree with you though: that fiddle doesn’t do the trick.

The CSS for the containing DIV looks OK although I don’t see the need for the left: 200

I’d probably start trying with something simple, like

div{
width: 90%;
margin: 0 auto;
text-align: center;
}

That should center both the div and the text inside it.

Now, if you want the text to be reduced as you write, I guess this div will have a max-width and height and you could use JS to know the calculated size and go from there.

But right now I’m thinking out loud.

3

Here’s another guess to add to @molona’s.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/can-div-single-line-can-be-centered-based-on-the-line-length/208716
s4n7h0
Nov 30, 2015 1:24 PM
http://jsfiddle.net/s4n7h0/so9ror2d/1/
-->
    <style type="text/css">
div {
    display:table;
    text-align:center;
    margin:0 auto;
    outline:1px dotted red;
}

    </style>
</head>
<body>

<div>some text</div>
<div>some long long text</div>
<div>some long long  long  long  text</div>
<div>some long long  long  long long long  long  long text </div>
<div>some really really long long long  long  long long long  long  long long long  long  long text </div>
<div>some really really long long long  long  long long long  long  long long long  long  long long long  long  long text </div>
<div>some really really long long long  long  long long long  long  long long long  long  long long long  long  long long long  long  long long long  long long long long  long  long long long  long  long text </div>

</body>
</html>

Why divs?

4

position and width won’t do I’m afraid. Try wrapping your divs in another one with display: inline-block and text-align: center and only keep the white-space: nowrap on the inner divs. The spans are not needed in this case too.

5

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