그누보드 QA - 드롭 다운 메뉴인데 가운데 정렬을 못하겠어요

드롭 다운 메뉴인데 가운데 정렬을 못하겠어요

운명개척 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022.03.31 17:40:59 조회 1861 (180.♡.♡.22)

본문

안녕하세요..

드롭다운 메뉴소스 인데요

가운데 정렬을 하고 싶은데

float:left; 을 수정하면 될거 같은데 못하겠어요

혹시 몰라서 center나 middle로 바꿔봐도 안되고요

도움 좀 요청합니다.

<!DOCTYPE html>

<html>

<head>

<title>HTML/CSS 드롭다운메뉴</title>

/* 전체영역에서 여백을 없애줌 */

* {

margin: 0;

padding: 0;

}

/* ul li태그에 리스트 스타일을 없앰 */

ul li{

list-style: none;

}

/* a태그에 텍스트 밑줄을 없애고 색상을 #333 */

a {

text-decoration: none;

color:#ffffff;

}

/* 글자크기를 16px 맑은 고딕 굵게하고 width넓이 700, 높이 50만큼 배경색은 #ccc, 글자색은 검정색, 라인높이50px

menu박스 가운데정렬, 글자가운데 정렬 */

#menu {

font:bold 16px "malgun gothic";

width:1300px;

height:30px;

background: #ffffff;

color:#ffffff;

line-height: 30px;

margin:0 auto;

text-align: center;

}

/* menu태그 자식의 ul의 자식 li를 왼쪽정렬과 넓이 140설정 */

#menu > ul > li {

float:left;

width:110px;

position:relative;

background:#41444d;

}

#menu > ul > li > ul {

width:110px;

display:none;

position: absolute;

font-size:14px;

background:#41444d;

}

#menu > ul > li:hover > ul {

display:block;

}

#menu > ul > li > ul > li:hover {

background: #a8a8a8;

transition: ease 1s;

}

</style>

</head>

<body>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

<li><a href="창세기/창세기.html" target="left">례이미야애가</a></li>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

<li><a href="창세기/창세기.html" target="left">고린도전서</a></li>

<li><a href="창세기/창세기.html" target="left">고린도후서</a></li>

<li><a href="갈라디아서/갈라디아서.html" target="left">갈라디아서</a></li>

</ul>

</li>

<ul>

<li><a href="창세기/창세기.html" target="left">데살전후서</a></li>

<li><a href="창세기/창세기.html" target="left">디모데전후서</a></li>

</ul>

</li>

<ul>

<li><a href="창세기/창세기.html" target="left">베드로전후서</a></li>

<li><a href="창세기/창세기.html" target="left">요한일이삼서</a></li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

#css

답변 4

디자이너민 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2022-03-31 19:23:34 211.♡.♡.164

#menu {

font:bold 16px "malgun gothic";

width:1300px;

height:30px;

background: #ffffff;

color:#ffffff;

line-height: 30px;

margin:0 auto;

text-align: center;

}

이것을 봤을때 이 메뉴를 감싸고있는 wrap이 이보다 크다면 메뉴는 가운데 정렬이 되는데

사장님이 말씀하신말씀은 li들을 가운대 정렬 시키고싶으시다는것이죠 ?

#menu>ul{display:inline-block;} 이것 한줄넣어주시면 1300 안에 가운대정렬이됩니다~

질문하신것이 이것이 아니라면 다시 코멘트남겨주세요

↳ 운명개척 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022-03-31 20:09:16180.♡.♡.22

덕분에 해결됐습니다.!^^ 감사합니다.~~^^* 건강하세요!

애드프로 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2022-03-31 17:59:48 118.♡.♡.219

어디를 가운데 정렬하고 싶다는거죠?

↳ 운명개척 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022-03-31 18:03:00180.♡.♡.22

실행하면 메뉴가 홈페이지 창 가로 사이즈가 1000이고 메뉴 총 사이즈가 800이라면
예쁘게 가운데로 정렬해서 놓고 싶은데 왼쪽부터 정렬되어서 우측에 200사이즈 만큼의 여백이
생깁니다...그런데 제가 알아보니 float:left;은 가운데 정렬이 아니라 가로 정렬이군요..
무엇을 수정해야 할까요?