CSS, 중앙 div, 크기에 맞게 축소?

CSS, 중앙 div, 크기에 맞게 축소?

---

내가 원하는 것은 다음과 같습니다.

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

... "some text"블록은 div입니다. div가 줄 바꿈없이 텍스트를 포함하는 데 필요한 최소 너비가되기를 원합니다. 텍스트가 너무 길어서 줄 바꿈하지 않고 맞출 수없는 경우 줄 바꿈해도 괜찮습니다.

div에 대해 명시적인 너비를 설정하고 싶지 않습니다. 최소 너비 또는 최대 너비를 설정하고 싶지 않습니다. 내가 말했듯이, 줄 바꿈없이 한 줄에 포함하기에는 너무 많은 텍스트가 있으면 줄 바꿈해도 괜찮습니다.

---

DIV 요소는 기본적으로 블록 수준이므로 자동으로 너비가 100 %가됩니다. 이를 변경하려면이 CSS를 사용하십시오.

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


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

편집 : 인라인 속성이 아닌 CSS 클래스를 사용하도록 업데이트하고 "블록"을 "인라인 블록"으로 변경했습니다.

---

모르겠습니다. 여기에있는 솔루션은 부분적으로 옳은 것 같지만 실제로는 작동하지 않습니다. Josh Stodola의 답변에 따라 Firefox, Safari, Chrome 및 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;
}

마크 업 :

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

IE6 지원을 추가하려면 (한숨) _height: [yourvalue]div에 추가 하세요. 예, 밑줄이 있습니다.

JSFiddle에서 직접 테스트하십시오 : http://jsfiddle.net/atp4B/2/

---

<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>

힌트 : 텍스트 블록에 DIV를 사용하지 마십시오 (SEO 및 더 나은 의미 론적 목적을 위해)

---

조쉬 스토 돌라의 소도구이지만 그가 정확히 옳지는 않았다. 필요한 속성은 다음과 같습니다.

display: inline-block;

내 문제가 해결되었습니다. 예이!

---

다음은 내가 원하는 것을 정확하게 만든 예입니다.
(jsFiddled 여기 : http://jsfiddle.net/yohphomu/ )

경고:

저는 CSS 광신자입니다 !!!

내가 귀하의 질문을 올바르게 이해하면 기본 설정이 자동이기 때문에 높이 또는 너비를 설정할 필요가 없습니다 (자동을 사용할 수 있다고 말함).하지만 이것의 유일한 문제는 배경을 변경하거나 테두리는 원하는 필드보다 더 많이 만들 것입니다. 그 이유는 무엇이며 어떻게 수정합니까?

또는 예제를 복사하고 연구하십시오.

이 문제를 가진 사람은 (이 문제가 있고 div를 사용한다고 가정하면) div 태그 사이의 모든 것은 (이해 목적을 위해) 완전한 세트로 간주됩니다. 즉, 해당 div에서 원하는 모든 것입니다. 예를 들어 텍스트 정렬을 가운데로 설정하려면 전체 줄 간격이 필요하고 (궁극적으로) 테두리가있는 경우에는 컴퓨터가 말한대로 수행합니다. 사용 된 모든 공간의 경계가됩니다. 이 글을 이해한다면 잘 모르겠다면 거기에서 당신을 도울 수 없습니다.

이제 무슨 일이 일어나는지 이해 했으니 어떻게 고칠까요? 한 부분은 중앙에, 다른 부분은 색상을 지정해야합니다. 내 예에서는 div를 사용하여 중앙에 배치하고 색상을 지정했습니다. div가 필요 했나요? 나는 그렇지 않다고 확신합니다. p를 중심으로 사용하여 동일한 결과를 얻을 수 있습니다 (또는 p를 제거하고 div 만 사용할 수 있음). 내가 이렇게 한 이유는 조직을 유지하기 위해서입니다.

사실은 생각할 때까지 깨닫지 못했지만 고칠 생각이 없었기 때문입니다.

이것이 귀하의 질문에 답하기를 바랍니다. 답을 구하는 데 4 년이 걸렸지 만, 그것을 알아내는 데 30 분이 걸렸습니다 (그리고 저는 CSS를 며칠 동안 공부했습니다).

예 :

<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>

그러면 CSS는 다음과 같습니다.

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


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

참고 : 동시에 프로젝트 작업을하고 텍스트가있는 전체 화면을 시뮬레이션하기 위해 설정된 너비와 높이로 컨테이너를 설정했습니다.

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.

---

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.

---

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>

---

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

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

---

HTML

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

CSS

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

참고URL : https://stackoverflow.com/questions/690397/css-centered-div-shrink-to-fit