안녕하세요.. 드롭다운 메뉴소스 인데요 가운데 정렬을 하고 싶은데 float:left; 을 수정하면 될거 같은데 못하겠어요 혹시 몰라서 center나 middle로 바꿔봐도 안되고요 도움 좀 요청합니다. HTML/CSS 드롭다운메뉴 /* 전체영역에서 여백을 없애줌 */ * { margin: 0; padding: 0; } /* ul li태그에 리스트 스타일을 없앰 */ ul li{ list-style: none; } /*...

이전 목록 다음

채택완료

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

운명개척

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-03-31 (목) 17:40:59 3,851

안녕하세요..

드롭다운 메뉴소스 인데요

가운데 정렬을 하고 싶은데

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개 / 댓글 3개

채택된 답변

+20 포인트

디자이너민

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-03-31 (목) 19:23:34

#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 안에 가운대정렬이됩니다~

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

답변에 대한 댓글 1개

운명개척

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-03-31 (목) 20:09:16

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

엑스엠엘

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-03-31 (목) 21:40:01

해당 페이지 주소(URL)을 올리시는 것이

빠르고 정확한 답변을 얻으실 수 있습니다.

sinbi

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-03-31 (목) 18:17:06

text-align:center 속성이나 margin:0 auto; 속성 이용해 보세요.

https://homzzang.com/b/css-254 (목차 1번 참고)

답변에 대한 댓글 1개

운명개척

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-03-31 (목) 21:23:49

아직 초보라 봐도 잘 모르겠네요 ㅠㅠ...답변 감사합니다.!^^

애드프로

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-03-31 (목) 17:59:48

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

답변에 대한 댓글 1개

운명개척

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-03-31 (목) 18:03:00

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

답변을 작성하려면 로그인이 필요합니다.

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

답변 4개 / 댓글 3개

답변에 대한 댓글 1개

답변에 대한 댓글 1개

답변에 대한 댓글 1개

공유하기