CSS를 사용하여 플로팅된 요소 중앙에 배치
CSS는 HTML 요소가 화면에서 어떻게 보이는지 스타일을 지정하고 웹 페이지의 여러 레이아웃을 한 번에 제어하는 데 사용됩니다. 이 기사에서는 CSS float 및 center 속성에 대해 설명합니다.
CSS를 사용하여 플로팅된 요소 중앙에 배치
CSS float 속성은 HTML 문서의 콘텐츠 위치 지정 및 서식 지정과 함께 활용됩니다. 표준적으로 float 속성에는 left, right, none, inherit의 네 가지 값만 있습니다.
left 및 right 값은 컨테이너의 각 왼쪽 및 오른쪽에 요소를 플로팅합니다.
요소가 부동하지 않도록 none 값이 사용됩니다. 마지막으로 inherit 값은 속성이 부모의 부동 소수점 값을 상속하도록 합니다.
float 요소에는 center 값을 사용할 수 없습니다. 따라서 이 기사에서는 float 요소를 중앙에 배치하는 방법을 살펴보겠습니다.
CSS로 부동 요소를 중앙에 배치하는 방법 1
예제 코드:
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
위의 예에서 HTML 컨테이너 클래스는 첫 번째 단계로 만들어집니다. 그 안에 다른 클래스는 float_center라고 합니다. 두 클래스 내에서 부동 및 중앙에 배치하려는 콘텐츠 또는 요소를 추가할 수 있습니다.
.container{
border: 1px solid red;
float: left;
position: relative;
left: 40%;
}
그런 다음 container 클래스에 CSS 속성을 추가해야 합니다. 위의 CSS 코드는 float 속성을 넣고 값을 left로 설정하여 컨테이너 클래스가 내용에 따라 너비를 변경하도록 합니다.
요소 주변에 테두리 속성을 추가할 수 있습니다. 또한 위치는 상대적이어야 합니다. 즉, 요소가 일반 위치를 기준으로 배치됩니다.
left 속성은 정상 위치에서 벗어나도록 합니다.
이 예에서는 left 속성을 40% 값으로 설정하여 콘텐츠가 정상 위치에서 40% 이동하도록 했습니다.
CSS 코드의 결과로 위와 같은 출력을 얻을 수 있습니다. 한 눈에 컨테이너의 왼쪽 가장자리 중앙에 있음을 알 수 있습니다.
float 요소는 이미 중앙에 있지만 성공하려면 다음 CSS 코드를 추가해야 합니다.
.container{
float: left;
position: relative;
left: 50%;
}
.float_center{
border: 1px solid red;
text-align: center;
background-color: bisque;
padding-right: 20px;
font-size: 25px;
margin-top: 50px;
float: left;
position: relative;
left:-50% ;
}
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
이 코드에서는 float_center 클래스에 대한 스타일을 추가했습니다. float 속성을 left 값으로 설정해야 합니다.
위치는 상위 클래스에 상대적이어야 합니다. 부동 요소를 중앙에 배치하려면 left 속성이 -50%여야 합니다.
그 외에 border, text-align, background-color, padding, font-size 및 margin 속성과 같은 속성을 사용하여 플로팅된 콘텐츠의 스타일을 지정할 수 있습니다. 이러한 속성은 디자이너의 요구 사항을 정의할 수 있습니다.
출력:
이것은 위의 float-center 예제의 최종 결과입니다. 마찬가지로 위의 코드를 사용하여 부동 요소를 가운데로 조정할 수 있습니다.
CSS로 부동 요소를 중앙에 배치하는 방법 2
float-center 방법의 또 다른 사용을 고려하면 페이지 매김을 식별할 수 있습니다. 예전에는 페이지가 많은 웹사이트에 적용되었습니다.
페이지 매김을 만들 때 float 속성을 자주 사용하여 정렬합니다. float 속성을 사용하여 페이지 매김을 중앙에 배치하는 방법이 중요합니다.
이를 해결하기 위해 다음 CSS 속성 및 값을 사용할 수 있습니다.
예제 코드:
<!DOCTYPE html>
<head>
<title>Pagination</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2 style="text-align: center;">Float center pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</div>
</body
이것은 center 및 pagination이라는 두 개의 클래스가 있는 HTML 코드입니다. 이 HTML 코드에서 각 페이지의 링크와 함께 5개의 href 요소를 설정합니다.
위의 결과를 고려하면 페이지 매김 요소가 중앙에 놓이거나 플로팅되지 않음을 알 수 있습니다. 다음 CSS 코드를 사용하여 페이지 매김을 float 및 centered로 설정할 수 있습니다.
.center{
text-align: center;
}
.pagination{
display: inline-block;
margin: 50px;
}
.pagination a{
color: black;
float: left;
padding: 9px 18px;
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
background-color: #efeded;
margin: 0 4px;
}
.pagination a:hover{
background-color: #7d656f;
}
text-align 속성을 center 값으로 설정하여 중앙을 페이지 매김으로 만들 수 있습니다. 일반적으로 float 속성을 사용하여 각 요소 옆에 페이지 매김을 배치할 수 있습니다.
보시다시피 위 코드의 pagination 클래스는 인라인 블록으로 표시되고 여백을 50픽셀로 설정합니다.
HTML 코드의 페이지 매김 클래스 내에서 7개의 href 요소를 정의했습니다. CSS 코드에서 href 요소의 스타일을 지정하기 위해 pagination a 선택기를 만들었습니다.
float 속성은 주로 left 값으로 설정되어 페이지 매김 요소를 나란히 배치합니다.
color 속성은 페이지 매김 요소의 글꼴 색상을 정의했습니다. padding 속성은 요소와 해당 테두리 내에 공간을 만들고 border-radius 속성은 테두리 모서리를 둥글게 만듭니다.
href 요소의 스타일을 지정하는 데 사용되는 background-color, margin, text-decoration 및 border 속성. 마지막으로 hover 속성이 배경색을 변경하는 페이지 매김 요소에 추가됩니다.
위의 CSS 코드로 다음과 같은 float-center pagination 도움말을 얻을 수 있습니다.
위의 두 가지 방법을 사용하여 부동 요소를 중앙에 배치할 수 있습니다. 첫 번째 방법은 부동 요소를 소유하는 모든 시나리오에서 사용할 수 있습니다.
두 번째는 모든 종류의 페이지 매김을 만들 수 있습니다.
부동 요소를 중앙에 배치하는 다른 방법
한 줄 텍스트를 중앙에 배치하기 위해 float 속성을 사용하지 않는 것이 좋습니다. 컨테이닝 블록에 text-align:center를 적용합니다.
또한 왼쪽과 오른쪽 여백을 비슷한 값으로 설정하여 블록이나 요소를 중앙에 배치할 수 있습니다. 블록의 너비가 명확한 경우 오른쪽 및 왼쪽 여백을 auto 값으로 설정할 수 있습니다.
결론
이 기사에서는 부동 블록 또는 CSS 요소를 중앙에 배치하는 방법을 고려합니다. 부동 요소 또는 블록에 적용되는 두 가지 방법을 언급했습니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.