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

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

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

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

2022.03.31 17:40:59 조회 2543 (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;은 가운데 정렬이 아니라 가로 정렬이군요..
무엇을 수정해야 할까요?