nicesource

Twitter Bootstrap으로 요소를 수평 또는 수직으로 중앙에 배치하려면 어떻게 해야 합니까? html 요소를 수직 또는 수평으로 메인 부모 내부에 중심을 맞출 수 있는 방법이 있습니까?업데이트: 지난 2013년 초에는 이 답변이 맞았을 가능성이 높았지만, 더 이상 사용해서는 안 됩니다.적절한 솔루션은 다음과 같은 오프셋을 사용합니다. class="mx-auto" 다른 사용자들은 다음과 같은 네이티브 부트스트랩 클래스도 사용할 수 있다고 제안합니다. class="text-center" class="pagination-centered" 부트스트랩 설명서에서: 요소를 다음으로 설정합니다.display: block그리고 센터비아margin. 믹스인과 클래스로 이용 가능합니다. ... div에서 이미지의..

CSS 필터: 투명도가 있는 컬러 이미지를 흰색으로 만듭니다. 저는 투명도가 있는 컬러의 png 이미지를 가지고 있습니다.저는 cs 필터를 사용하여 전체 이미지를 흰색으로 만들되 투명도는 그대로 두려고 합니다.CSS에서 가능합니까?사용가능 filter: brightness(0) invert(1); html { background: red; } p { float: left; max-width: 50%; text-align: center; } img { display: block; max-width: 100%; } .filter { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } Original: Filter: 첫번째,b..

CSS 콘텐츠 생성 '입력' 요소 전후 이 질문에는 이미 다음과 같은 답변이 있습니다. 입력 필드에서 의사 요소 후에 :before 또는 :fter a pseudo-element를 사용할 수 있습니까? (21개 답변) 닫힘7년 전에. Firefox 3 및 Google Chrome 8.0에서는 다음이 예상대로 작동합니다. Test 하지만 그 요소가 그 다음과 같은 경우에는.: 왜 제가 생각했던 것처럼 작동이 안 되는 겁니까?와 함께:before그리고.:after해당 요소 내부의 내용 앞에 삽입할 내용을 지정합니다.)을 지정합니다.input요소에 내용이 없습니다. 예를 들어 글을 쓴다면Test(잘못된) 브라우저는 이를 수정하고 입력 요소 뒤에 텍스트를 넣을 것입니다. 당신이 할 수 있는 유일한 방법은 모든 ..

반응형 이미지 정렬 센터 부트스트랩 3 저는 부트스트랩 3을 이용해 카탈로그를 만듭니다.태블릿에 표시될 때, 제품 이미지는 작은 크기(500x500)와 브라우저의 너비가 767 픽셀이기 때문에 보기 흉합니다.화면 중앙에 이미지를 넣고 싶은데, 왠지 그럴 수가 없어요.누가 그 문제를 해결하는데 도움을 줄까요? Twitter Bootstrap 3(v3.0.1 이후)에 클래스가 있으므로 다음을 사용합니다. 부트스트랩 v3.0.1 이상을 사용하는 경우 이 솔루션을 대신 사용해야 합니다.사용자 지정 CSS로 부트스트랩의 스타일을 재정의하지 않고 대신 부트스트랩 기능을 사용합니다. 나의 원래 답변은 후세를 위해 아래에 나와 있습니다. 이것은 아주 쉽게 고칠 수 있습니다.왜냐면.img-responsive부트스트랩에서..

SASS - 여러 파일에 걸쳐 변수 사용 프로젝트에 대한 모든 SASS 변수 정의를 저장하는 central .scss 파일 하나를 보관하고 싶습니다. // _master.scss $accent: #6D87A7; $error: #811702; $warning: #F9E055; $valid: #038144; // etc... 프로젝트의 특성상 CSS 파일 수가 많을 것입니다.모든 프로젝트 전체 스타일 변수를 한 위치에 선언하는 것이 중요합니다. SCSS에서 이것을 할 수 있는 방법이 있습니까?이렇게 할 수 있습니다. utilities라는 폴더가 있고 그 안에 _variables.scss라는 파일이 있습니다. 그 파일에서 나는 다음과 같은 변수를 선언합니다. $black: #000; $white: #fff; ..

디브에서 가로 스크롤 바를 제거하려면 어떻게 해야 합니까? 때.overflow: scroll는 가로 세로 바를 . , . 디브에서 가로 스크롤 바를 제거하는 방법이 있습니까?overflow-x: hidden; 쓰는 거 overflow-x: hidden; 코드는 다음과 같습니다. overflow-y: scroll; overflow-x: hidden; CSS overflow-y: scroll; jsFiddle에서 보세요. 다음을 제거할 경우 주의하십시오.-yoverflow-y됩니다.y,됩니다.와 함께overflow-y: scroll 바는 항상 ..필요한 경우에만 y 스크롤 막대를 표시하려면 다음과 같은 작업을 수행합니다. .mydivclass {overflow-x: hidden; overflow-y: aut..

CSS에서 자녀에게 부모의 곡선 경계선을 지키도록 강요 저는 다른 디브 안에 디브가 있습니다.#outer그리고.#inner.#outer곡선의 테두리와 흰색 바탕을 가지고 있습니다.#inner곡선의 경계가 없고 초록색 배경을 가지고 있습니다.#inner의 곡선 경계 너머로 뻗어 있습니다.#outer. 이걸 막을 방법이 없을까요? #outer { display: block; float: right; margin: 0; width: 200px; background-color: white; overflow: hidden; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #..

표시와 함께 입력: 블록은 블록이 아닙니다. 왜 안 됩니까? 왜 그럴까요?display:block;width:auto;내 텍스트 입력에서 디브처럼 행동하지 않고 컨테이너 폭을 채우지 않습니까? 디브는 단순히 자동 너비를 가진 블록 요소라는 인상을 받았습니다.다음 코드에서는 div와 입력의 치수가 같지 않아야 합니까? 폭을 채우기 위한 입력은 어떻게 해야 합니까?입력에 패딩과 테두리(최종 너비 1픽셀 + 5픽셀 + 100% + 5픽셀 + 1픽셀)가 있기 때문에 100% 너비가 작동하지 않습니다.고정 폭은 선택 사항이 아니며, 좀 더 유연한 것을 찾고 있습니다. 저는 해결책에 대해 직접적인 답변을 원합니다.이것은 CSS quirk처럼 보이고 나중에 이해하는 것이 유용할지도 모릅니다. 저는 이미 포장지 해결 ..

CSS 확인란 입력 스타일 스타일에 상관없이input모든 입력 요소에 영향을 미칩니다.각 체크박스 요소에 클래스를 적용하지 않고 체크박스에만 적용하도록 스타일링을 지정할 수 있는 방법이 있습니까?CSS 2를 사용하면 다음을 수행할 수 있습니다. input[type='checkbox'] { ... } 이것은 지금쯤이면 꽤 광범위하게 지원될 것입니다.브라우저 지원 참조레이블 없이 자체 솔루션을 만듭니다. input[type=checkbox] { position: relative; cursor: pointer; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 16px; height: 16px; top:..

모바일 웹 페이지에서 확대/축소를 "비활성화"하려면 어떻게 해야 합니까? 저는 기본적으로 여러 개의 텍스트 입력이 있는 큰 형태의 모바일 웹 페이지를 만들고 있습니다. 하지만 (적어도 안드로이드 휴대폰에서는) 어떤 입력을 클릭할 때마다 페이지 전체가 확대되어 나머지 페이지가 가려집니다.이동 웹 페이지에서 이런 종류의 줌을 비활성화할 수 있는 HTML이나 CSS 명령이 있습니까?필요한 것은 이것뿐입니다. 파티에 늦으신 분들에게, 저는 커터리지의 대답이 통하지 않고 베니 노이게바우어의 대답은 목표 밀도 dpi(가치가 떨어지는 기능)를 포함합니다. 하지만 이 방법은 저에게 효과가 있습니다. 여기에는 여러 가지 접근 방식이 있습니다. 일반적으로 접근성을 위해 줌을 할 때 사용자를 제한해서는 안 된다는 입장이지만..