CODEWITHSUNDEEP
css
dirtside
dirtside

Reputation: 8270

CSS, centered div, shrink to fit?

Here's what I want:

text text text text text text text text text text text
text text text text text text text text text text text
                   +-----------+
                   | some text |
                   +-----------+
text text text text text text text text text text text
text text text text text text text text text text text

...where the "some text" block is a div. I want the div to be the minimum width necessary to contain its text without wrapping. If the text is too long to fit without wrapping, then it's okay if it wraps.

I do NOT want to set an explicit width for the div. I don't want to set min-width or max-width either; like I said, if there's too much text to contain on one line without wrapping, then it's okay if it wraps.

Upvotes: 82

Views: 100025

Answers (10)

Jan Turoň
Jan Turoň

Reputation: 32902

display: inline-block won't work if the block is not closed just before and just after the desired centered text. What you really need is to set width: fit-content; margin: auto; on block element, see the snippet.

.center {
  display: block;
  width: fit-content;
  margin: 1em auto;
  padding: .5em;
  text-align: right;
  background: yellow;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla diam sagittis, scelerisque ipsum ac, imperdiet tortor. Curabitur dapibus metus eu neque consectetur hendrerit. Cras interdum faucibus malesuada.

<div class="center">
  Lorem ipsum yourself, buddy!<br>
  Try to align this!
</div>

In auctor aliquam erat in pharetra. Suspendisse potenti. Pellentesque vehicula interdum sem vel tristique. Nullam erat nisl, imperdiet et turpis ut, ornare vulputate erat.

Upvotes: 1

Peter Gordon
Peter Gordon

Reputation: 1077

I recommend flexbox! See what's possible at this website, solved by flexbox.

It's quite new but works in all the major modern browsers (IE10 uses -ms- prefix, IE11+, Firefox 31+, Chrome 31+, Safari 7+, ...) - see this chart.

Basically, vertical and horizontal centering, complete with dynamic sizing, can be accomplished in 4 statements:

parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

Make sure this parent actually is 100% height. You may need to set body and html to 100% height too.

My implementation of this can be seen at my own personal website, http://pgmann.cf.

Upvotes: 3

Crismogram
Crismogram

Reputation: 936

HTML

<div class="outerdiv">
<div class="innerdiv">
++++TEXT+++
</div>
</div>

CSS

.outerdiv{
text-align: center;
}
.innerdiv{
display: inline-block;
}

Upvotes: 0

Konstantin Tarkus
Konstantin Tarkus

Reputation: 38358

<style type="text/css">
    /* online this CSS property is needed */
    p.block {
        text-align: center;
    }
    /* this is optional */
    p.block cite {
        border: solid 1px Red;
        padding: 5px;
    }    
</style>

<p>Some text above</p>
<p class="block"><cite>some text</cite></p>
<p>Some text below</p>

Hint: don't use DIVs for text blocks (for SEO and a better semantic purposes)

Upvotes: 6

user2438870
user2438870

Reputation:

Here's an example I made of exactly what your looking for:
(jsFiddled here: http://jsfiddle.net/yohphomu/)

Warning:

I'm a CSS fanatic!!!

If I understand your question correctly, there is no need to set a height or width because their default setting is auto (that being said you can use auto), but the only problem with this is that if you wanted to change the background or put a border it will make it around more than the desired field. Why is that and how do we fix it, read on.

Or just copy and study the example.

Any one having this problem hasn't realized on thing (assuming you have this problem and are using div's) anything between div tags is considered (for understanding purposes) a complete set, meaning that in that div is all the things you want it to stand for (computers do what they're told, not what you want them to do) so (for example) in order to set the text-align to center it needs that whole lines space and (ultimately) if it had a border, it would border all the space it used. If you understand this read on, if not well can't help you there.

So now that we understand what happens, how do we fix it? Well we need one part to center it, the other to color it. In my example I used a div to center it and span to color. Did I need the div? I'm am positive I did not. I could have achieved the same thing by using the p to center (or I could get rid of the p and just use div). The reason I did this was to keep it organized.

Actually just because I didn't realize until I thought about it, but didn't feel like fixing it.

Hope this answered your question. Took you 4 years for an answer but me, 30 mins to figure it out (and I've been studying CSS for a few days now).

The Example:

<div class='container'>
    <div class="text">
        text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
    </div>
    <div class="holder">
        <p><span>text here</span></p>
    </div>
    <div>
        text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
    </div>
    </div>

Then css would look like:

.container {
width: 500px;
height: 500px;
}
.text {
    font-size: 20px;
}
.holder {
text-align: center;


}
span {
background-color: blue;
    border: 1px solid black;
}

Notice: I set the container with set width and height because I was working on a project at the same time and to simulate a full screen with text.

Also note that I have made it so that that the text has a separate background color with a border. I did this to show its measurements are independent and rescale when needed.

You are welcome, also I think people didn't understand your question. Hope I did.

Upvotes: 2

Vladimir Bundalo
Vladimir Bundalo

Reputation: 655

<style>
p.one
{
border-style:solid;
border-width:2px;
border-color:red;
display:inline-block;
}
</style>

<p class="one">some text</p>

Upvotes: 0

Lukas
Lukas

Reputation: 10340

I don't know, the solutions here seem partially right, but then don't really work. Based on Josh Stodola's answer, here's a cross-browser solution tested in Firefox, Safari, Chrome and IE 7, 8 & 9

CSS:

body {
    text-align: center;
}

#centered-div {
    text-align: left;
    background: #eee;

    display: inline-block;

    /* IE7 bs - enables inline-block for div-elements*/
    *display: inline;
    zoom: 1;
}

Markup:

<div id="centered-div">
    Cum sociis natoque penatibus et magnis dis<br />
    parturient montes, nascetur ridiculus mus.
</div>

To add IE6 support (sigh), add _height: [yourvalue] to the div. Yes, with an underscore.

Test it yourself on JSFiddle: http://jsfiddle.net/atp4B/2/

Upvotes: 9

Josh Stodola
Josh Stodola

Reputation: 82483

DIV elements are block-level by default, which means they automatically get 100% width. To change that, use this CSS...

.centerBox {
  display:inline-block;
  text-align:center;
}


<div class="centerBox">
  Some text
</div>

EDIT: Updated to use a CSS class rather than inline attribute and changed "block" to "inline-block"

Upvotes: 84

dirtside
dirtside

Reputation: 8270

Props to Josh Stodola, although he wasn't exactly right. The property needed is:

display: inline-block;

Which has solved my problem. Yay!

Upvotes: 6

David Snabel-Caunt
David Snabel-Caunt

Reputation: 58361

Something like this?

<html>
<head>
</head>
<body style="text-align: center;">

   <div style="width: 500px; margin: 0 auto;">

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

       <div>hello</div>

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

   </div>


</body>

Upvotes: 0

Related Questions