「」의 맞추기 「」의 맞추기 「」의 맞추기 페이지 중앙(가로/가로)까지

itsource

「」의 맞추기 「」의 맞추기 「」의 맞추기 페이지 중앙(가로/가로)까지

mycopycode 2023. 4. 17. 21:49

「」의 맞추기
페이지 중앙(가로/가로)까지

는 나나 a a a가 있다div를 달다width800픽셀로 설정합니다.브라우저의 폭이 800픽셀을 넘으면, 이 픽셀은 확장되지 않습니다.div이치노

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

position: absolute 다음에 또 한 번.top:50% ★★★★★★★★★★★★★★★★★」left:50% 모서리를 왼쪽 모서리를 추가합니다.margin-top -100은 100만큼 위로 이동하며, 로 -100은 100만큼 위로 이동합니다.margin-left " " " 가 .div페이지 중앙에 정확하게 표시됩니다.

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}

<div id="outPopUp"></div>

플렉스 박스 솔루션은 2015년에 도입/향후 도입할 수 있는 방법입니다.는 콘텐츠를 중앙에 정렬하는 상위 요소에 사용됩니다.

HTML

<div class="container">
  <div class="center">Center</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}

산출량

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 400px; 
  padding: 10px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>

<div></div>

div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

가운데를 세로로 한다는 뜻인가요, 아니면 가로로 한다는 뜻인가요?다음 명령어를 지정했다고 하셨는데height로, 800픽셀로, 800픽셀로 디브(div)로 디브()로 디브(div)가.width것보보다다
가운데를 , 「중간」을 할 수 .margin: auto;아트리뷰트이 때, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이, 이,body ★★★★★★★★★★★★★★★★★」html요소에는 여백이나 패딩이 없습니다.

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }

Internet Explorer 6에서도 올바르게 동작하려면 다음과 같이 해야 합니다.

HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}

콘텐츠 크기를 고정하지 않고 부모 내에서 수직 및 수평 방향으로 구분

이 페이지에는 몇 가지 솔루션이 있어 공유해야 할 코드가 너무 많지만, 가능한 것은 다음과 같습니다.

개인적으로 저는 유명한 트랜스폼 번역 -50% 트릭을 사용한 솔루션이 가장 마음에 듭니다.요소의 고정(% 또는 px)과 정의되지 않은 높이 및 폭 모두에 대해 잘 작동합니다.
코드는 다음과 같이 단순합니다.

HTML:

<div class="center"><div>

CSS:

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -ms-transform: translate(-50%, -50%);  /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Safari and Chrome*/
  -o-transform: translate(-50%, -50%); /* Opera */
  transform: translate(-50%, -50%);

  /* optional size in px or %: */
  width: 100px;
  height: 100px;
}

여기 바이올린이 작동한다는 것을 보여준다.

다음과 같이 사용할 수도 있습니다.

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>

간단히 .center 에 붙다body 후 " " "를 종료합니다.center의 꼬리표를 body 삭제:

<body>
    <center>
        ... Your code here ...
    </center>
</body>

지금까지 사용해 본 브라우저는 모두 이것으로 동작했습니다.

이것은 플렉스 컨테이너를 통해 쉽게 달성할 수 있습니다.

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

링크 미리보기

가운데에 둘 칸에 이 클래스를 추가합니다(가로폭이 설정되어야 함).

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

또는 다음과 같이 div 클래스에 마진 정보를 추가합니다.

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}

CSS flex 속성을 사용합니다.http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* Centered */
  display: box;
  flex-align: center;
  flex-pack: center;
}

L&R을 중심으로 하는 div page를 방지하는 이전 코드의 기타 기존 설정은 다음과 같습니다.

외부 스타일시트 링크에 숨겨진 다른 클래스.
외의 는, 「하다」와 같은 것에 짜넣어져 .img(': 'CSS'의 CSS').
및된 범례 가 이름 ID "/" CLASS"와합니다.div를 누릅니다

div 너비를 지정하지 않고 센터링:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

게 요.<center>츠키다

「CHANGE:」라고 하는, 「CHANGHANGE:<h1>의 개요<center> 중앙에 됩니다.
크기를 지정할 수 (「크기」에 ).display:blocksetting의 디폴트에 설정됩니다.

다음 코드를 사용하여 div box의 중심을 맞춥니다.

.box-content{
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 800px;
    height: 100px;
    background-color: green;
}

<div class="box-content">
</div>

텍스트 한 줄뿐만 아니라 정규적인 내용이 있는 경우 마진을 계산하기 위해서만 알고 있습니다.

다음은 예를 제시하겠습니다.

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

so,는,#supercontainer의 것입니다"whole page" 그 ★★★width1200px.

#middlecontainerdiv, 신신사사사사 with with with with with with with with with with with with with with with with,width 102px의 경우.width알고 있는 2로 의 크기를 2로 .width- () =136 : 1200 / 2 - (102 / 2) = 549;

네, 이것도 CSS의 der grose fail이라는 것을 알 수 있습니다.

.middle {
   margin:0 auto;
   text-align: center;
}

/* 그러면 div가 가운데로 이동합니다 */

parent {
    position: relative;
}
child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

<parent>
  <child>
  </child>
</parent>

justify-content ★★★★★★★★★★★★★★★★★」align-items와 하다div

https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}

<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

body, html {
    display: table;
    height: 100%;
    width: 100%;
}
.container {
    display: table-cell;
    vertical-align: middle;
}
.container .box {
    width: 100px;
    height: 100px;
    background: red;
    margin: 0 auto;
}

http://jsfiddle.net/NPV2E/

"body" 태그의 "width:100%"는 예시일 뿐입니다.실제 프로젝트에서는 이 속성을 제거할 수 있습니다.

심플한 http://jsfiddle.net/8pd4qx5r/

html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}

.content {
  margin: 0 auto;
  width: 260px;
  text-align: center;
  background: pink;
}

이것은 Internet Explorer에서도 동작하지만, 자동 마진은 동작하지 않습니다.

.centered {
    position: absolute;
    display:  inline-block;
    left:     -500px;
    width:    1000px;
    margin:   0 50%;
}

중앙 콘텐츠가 다른 div 안쪽에 있는 경우 여백만 저장할 수 있습니다.다른 것은 없어요.부트스트랩과 같은 프레임워크를 사용하지 않을 때는 항상 직면합니다.

제 경우는, 전화 스크린 사이즈를 알 수 없고, 이렇게 했습니다.

HTML

<div class="loadingImg"></div>

CSS

.loadingImg{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999;
    border: 0;
    background: url('../images/loading.gif') no-repeat center;
    background-size: 50px 50px;
    display: block;
    margin: 0 auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

JavaScript(이 DIV를 표시하기 전에)

$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();

<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

세로 위치를 변경하려면 250의 값을 변경하면 필요에 따라 내용을 정렬할 수 있습니다.폭 및 기타 매개변수를 지정할 필요가 없습니다.

무슨 이유에선지, 지금까지의 답변 중 어느 것도 나에게는 통하지 않았다.이것은 나에게 있어서도 유효하고 브라우저에서도 유효합니다.

.center {
    text-align: center;
    height: 100%;

    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;
}

화면 너비를 가져옵니다.
그럼 25%의 마진을 남긴다.
25%의 마진을 올리다

이렇게 하면 컨테이너의 내용물이 가운데에 놓입니다.

예: 용기 너비가 = 800px라고 가정합니다;

<div class='container' width='device-width' id='updatedContent'>
    <p id='myContent'></p>
    <contents></contents>
    <contents></contents>
</div>

if ($("#myContent").parent === $("updatedContent"))
{
    $("#myContent").css({
        'left': '-(device-width/0.25)px';
        'right': '-(device-width/0.225)px';
    });
}

언급URL : https://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page

'itsource' 카테고리의 다른 글

Windows에서 260자 경로 길이 제한이 있는 이유는 무엇입니까? (0)	2023.04.17
T-SQL 선택에서 각 행에 대해 난수를 생성하려면 어떻게 해야 합니까? (0)	2023.04.17
선택 안 함 Excel vba 고정 창 (0)	2023.04.17
git 풀 실행 취소, 저장소를 이전 상태로 되돌리는 방법 (0)	2023.04.17
Swift의 Documents 디렉토리에 파일이 있는지 확인하는 방법 (0)	2023.04.17

현재글「」의 맞추기 「」의 맞추기 「」의 맞추기 페이지 중앙(가로/가로)까지

각종 프로그래밍 정보를 다루는 블로그입니다.

JavaScript, Wordpress, sql-server, C, oracle, MongoDB, PowerShell, Reactjs, Python, php, git, bash, java, vuejs2, angularJs, mariadb, spring-boot, json, MySQL, vuex,

Today :
Yesterday :

mycopycode