2014-03-03 1 views
0

2 개의 입력 텍스트를 내 모바일 웹 페이지로 센터링하려고합니다.HTML/CSS : 자동으로 입력 텍스트를 장치 너비에 맞 춥니 다

enter image description here

HTML

<div class="servers"> 
    <input type="text" name="text-basic" id="text-basic" value="dfrferf" class="btn_private_server"> 
    <input type="text" name="text-basic" id="text-basic" value="gtgtrgrt" class="btn_public_server"> 
</div> 

나는 그것을하는 방법을 모르겠어요.

CSS

.servers { 
    display: table-caption; 
    margin: 40px; 
} 

#text-basic { 
    font-weight: bold; 
    font-size: 16px; 
} 
+1

중복 ID가 유효하지 않습니다. –

+0

'display : table-caption;'을 사용해야하는 이유는 무엇입니까? –

+0

http://jsfiddle.net/BbNeK/2/ – Mahavir

답변

2
.servers { 

    width: 50%; 
    margin: 0 auto; 
} 
+0

고마워! – wawanopoulos

+0

또 다른 질문은, 내 div의 위치를 ​​잃지 않고 입력 텍스트의 크기를 어떻게 향상시킬 수 있습니까? – wawanopoulos

+0

잘 모르겠습니다. 입력 요소의 크기를 늘리시겠습니까? – Bir

0

업데이트 대답, 또한 그들은 모두 같은

.servers { 
    width: 50%; 
    margin: 0 auto; 
} 
+0

텍스트 센터를 정렬하고 싶지 않습니다. divs를 센터링하고 싶습니다. – wawanopoulos

+0

클래스 서버가있는 div를 원하면 text-align : center를 적용하십시오. 그 부모에게 – Rex

2

우선 할 수 없다 텍스트 박스 ID를 변경, 당신은 입력 필드는 할 수 없습니다 같은 이드. clases를 대신 사용하십시오.

편집 : 은 사실 그냥 클래스로 ID와 IDS로 클래스를 사용하고, 넣어 텍스트 기본 입력 클래스와 IDS로 클래스의 값으로.

간단한 방법은 그들이 할 수있는 중앙에 :

input { 
     margin: 0 auto; 
} 
0

모두 텍스트 상자에 대한 동일한 클래스 이름을 지정하고 텍스트 정렬을주십시오 : 중앙 스타일 클래스에 대해.

관련 문제