Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
144 views
in Technique[技术] by (71.8m points)

html - Horizontal Center Radio Button in Table

I'm not what happening but here is my HTML;

<tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'>
  <td class="answer_cell_003 answer-item radio-item">
  <label class="hide read" for="answer158311X2059X38315A008-3">Neither agree nor disagree</label>
  <input class="radio" type="radio" name="158311X2059X38315A008" value="3" id="answer158311X2059X38315A008-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
</tr>

I'm trying to center-align the radio button but just stays on the left. So far I have tried things like;

table td .radio { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}
table tr td { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}

It will acknowledge the border property. and display a red border, so I know it's being referenced correctly.

What am I doing wrong?

UPDATE; MORE CODE

table td .radio { border:1px solid red;display: block;margin:0 auto;}
    table tr td { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}
	<table class="question subquestions-list questions-list " summary="An array with sub-question on each line. The answers are contained in the table header. ">
		<colgroup class="col-responses">
		<col class="col-answers" width="50%%" />
	<col class="odd" width="10%" />
	<col class="even" width="10%" />
	<col class="odd" width="10%" />
	<col class="even" width="10%" />
	<col class="odd" width="10%" />
		</colgroup>
		<thead><tr class="dontread">
		<td>&nbsp;</td>
		<th>Strongly agree</th>
		<th>Agree</th>
		<th>Neither agree nor disagree</th>
		<th>Disagree</th>
		<th>Strongly disagree</th>
	</tr></thead>
		
	<tbody>
	
		<tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'>
		<th class="answertext">
	a. One.<input type="hidden" name="java158311X2059X38315A008" id="java158311X2059X38315A008" value="" />
		</th>
				<td class="answer_cell_001 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A008-1">Strongly agree</label>
		<input class="radio" type="radio" name="158311X2059X38315A008" value="1" id="answer158311X2059X38315A008-1" title="Strongly agree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
				<td class="answer_cell_002 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A008-2">Agree</label>
		<input class="radio" type="radio" name="158311X2059X38315A008" value="2" id="answer158311X2059X38315A008-2" title="Agree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
				<td class="answer_cell_003 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A008-3">Neither agree nor disagree</label>
		<input class="radio" type="radio" name="158311X2059X38315A008" value="3" id="answer158311X2059X38315A008-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
				<td class="answer_cell_004 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A008-4">Disagree</label>
		<input class="radio" type="radio" name="158311X2059X38315A008" value="4" id="answer158311X2059X38315A008-4" title="Disagree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
				<td class="answer_cell_005 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A008-5">Strongly disagree</label>
		<input class="radio" type="radio" name="158311X2059X38315A008" value="5" id="answer158311X2059X38315A008-5" title="Strongly disagree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
	</tr>
	
	
		<tr id='javatbd158311X2059X38315A603' class='array1 answers-list radio-list'>
		<th class="answertext">
	b. Two.<input type="hidden" name="java158311X2059X38315A603" id="java158311X2059X38315A603" value="" />
		</th>
				<td class="answer_cell_001 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A603-1">Strongly agree</label>
		<input class="radio" type="radio" name="158311X2059X38315A603" value="1" id="answer158311X2059X38315A603-1" title="Strongly agree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
				<td class="answer_cell_002 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A603-2">Agree</label>
		<input class="radio" type="radio" name="158311X2059X38315A603" value="2" id="answer158311X2059X38315A603-2" title="Agree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
				<td class="answer_cell_003 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A603-3">Neither agree nor disagree</label>
		<input class="radio" type="radio" name="158311X2059X38315A603" value="3" id="answer158311X2059X38315A603-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
				<td class="answer_cell_004 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A603-4">Disagree</label>
		<input class="radio" type="radio" name="158311X2059X38315A603" value="4" id="answer158311X2059X38315A603-4" title="Disagree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
				<td class="answer_cell_005 answer-item radio-item">
	<label class="hide read" for="answer158311X2059X38315A603-5">Strongly disagree</label>
		<input class="radio" type="radio" name="158311X2059X38315A603" value="5" id="answer158311X2059X38315A603-5" title="Strongly disagree" onclick="checkconditions(this.value, this.name, this.type)" />
		</td>
	</tr>
	</tbody>
	</table>
    
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Make radio button as a block element.

display:block

table td .radio { border:1px solid red;display: block;margin:0 auto;}
table tr td { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}
<table>
	<tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'>
  <td class="answer_cell_003 answer-item radio-item">
  <label class="hide read" for="answer158311X2059X38315A008-3">Neither agree nor disagree</label>
  
  <input class="radio" type="radio" name="158311X2059X38315A008" value="3" id="answer158311X2059X38315A008-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
  </tr>
</table>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...