h1에서 div 중심화

잭 멜렌 데즈

freecodecamp 용 포트폴리오를 만들려고하는데 버튼을 중앙에 배치하는 방법이나 페이지에서 "row"라고 표시된 div를 찾을 수 없습니다. 나중에 더 많은 버튼을 추가 할 것이므로 행 div가 필요하지만 지금은 FCC 버튼 만 필요합니다. 아래는 지금까지 내 사이트에 대한 내 html 및 css 파일입니다. 어떤 도움이라도 환영합니다!

HTML :

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

<!-- Web page starts here -->
<body id="body">
  <section id="land">
      <h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
        <div class="row" id="btnrow">
          <a href="http://www.freecodecamp.com/zacmelendez" class="btn responsive" id="fcc"><i class="fa fa-file-code-o"> Free Code Camp</i></a>
        </div>
  </section>
  <section id="intro">
  </section>
</body>

CSS :

#body {
  height: 100vh;
  width: 100%;
}

#mpp {
  font-family: Monospace;
  font-size: 50px;
  color: white;
  padding-top: 15%;
  margin: 0;
}
#land {
  background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
  width: 100%;
  height: 100vh;
}
#fcc {
  background-color: #016403;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 17px;
  position: inherit;
}
#btnrow {
  right: 50%;
}
레드 머큐리
#btnrow {
  display: flex;
  justify-content: center;
}

트릭을해야합니다. 아래 작업 예를 참조하십시오.

#body {
  height: 100vh;
  width: 100%;
}

#mpp {
  font-family: Monospace;
  font-size: 50px;
  color: white;
  padding-top: 15%;
  margin: 0;
}
#land {
  background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
  width: 100%;
  height: 100vh;
}
#fcc {
  background-color: #016403;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 17px;
  position: inherit;
}
#btnrow {
  display: flex;
  justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

<!-- Web page starts here -->
<body id="body">
  <section id="land">
      <h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
        <div class="row" id="btnrow">
          <a href="http://www.freecodecamp.com/zacmelendez" class="btn responsive" id="fcc"><i class="fa fa-file-code-o"> Free Code Camp</i></a>
        </div>
  </section>
  <section id="intro">
  </section>
</body>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

<div> 중심화

분류에서Dev

IE7에서 div 중심화

분류에서Dev

모달 창에서 div 중심화

분류에서Dev

배경색으로 div에서 h1을 중앙에 배치

분류에서Dev

CSS3에서 내부 원형 Div 중심화

분류에서Dev

컨테이너 내에서 반응 형 DIV 중심화

분류에서Dev

JQuery : div 내에서 이미지 중심화

분류에서Dev

div 내부 중심에 div

분류에서Dev

부트 스트랩 내에서 작동하지 않는 중첩 된 div 중심화

분류에서Dev

크롬에서만 h1과 겹치는 Div

분류에서Dev

중심 절대 div에서 큰

분류에서Dev

H1 중심에 아이콘 정렬

분류에서Dev

Align H1 to bottom right of DIV

분류에서Dev

CSS : 플로팅 div에서 겹치는 헤드 라인 h1

분류에서Dev

H2 Span을 DIV의 중심에 수직으로 정렬

분류에서Dev

TableRow 내에서 ImageView 중심화

분류에서Dev

Joomla에서 이미지 중심화

분류에서Dev

상대 div / h1 위에 고정 div 배치

분류에서Dev

div 내부에 4 개의 div를 중심으로

분류에서Dev

div를 다른 div 내부와 이미지 중심에 배치

분류에서Dev

메뉴 모음에서 p 요소 및 div 중심에 배치

분류에서Dev

JavaScript 백 스페이스 및 h1 요소에서 중단 제거

분류에서Dev

img 요소에서 h1을 수직 및 수평으로 중앙

분류에서Dev

확장 가능한 div 블록 중심화

분류에서Dev

jQuery / JavaScript를 사용하는 iframe의 활성 화면 중심 DIV

분류에서Dev

div 중심화; 무엇을 해야할지 모르겠다

분류에서Dev

창 중심 div에서 높이가 고정되지 않은 스크롤바를 활성화하는 방법은 무엇입니까?

분류에서Dev

css에서 div 및 / 또는 ul을 중심으로

분류에서Dev

H1 내에서 스팬을 사용할 때 H1이 수평으로 중앙에 위치하지 않음 (오른쪽에 추가됨)

Related 관련 기사

뜨겁다태그

보관