CSS 플로트와 래퍼를 사용하여 수평 메뉴를 중앙에 배치하는 방법은 무엇입니까?

가로

메뉴

당면한 과제

인라인 블록, 블록 및 중앙 정렬의 조합을 사용하여 가로 메뉴를 중앙 정렬하려고 시도했지만 원하는 결과를 얻기 어려웠습니다.

에서 제안한 솔루션 웹

리소스(http://pmob.co.uk/pob/centred-float.htm)에서는 래퍼 요소가 왼쪽으로 떠 있고 화면 밖으로 왼쪽으로 이동하는 방법을 제안합니다. 내부 요소가 떠있다 맞습니다.

#buttons {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
}

#buttons ul {
  list-style: none;
  position: relative;
  left: 50%;
}

#buttons li {
  float: left;
  position: relative;
}

#buttons a {
  text-decoration: none;
  margin: 10px;
  background: red;
  float: left;
  border: 2px outset blue;
  color: #fff;
  padding: 2px 5px;
  text-align: center;
  white-space: nowrap;
}

<div>

결론

제공된 코드는

DIV 내의 메뉴를 사용하여 목록 항목을 사용 가능한 공간의 중앙으로 이동합니다. 그러나 이 접근 방식은 목록 항목 자체를
요소. 이를 위해서는 JavaScript가 필요할 수 있습니다.

위 내용은 CSS 플로트와 래퍼를 사용하여 수평 메뉴를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!