user3595632 user3595632 - 3 months ago 8
CSS Question

How to locate several buttons(or 'a' tag) at the center in html?

I want to locate two

a
tags at the center of window.

Here is what I tried:

<div class="row">
<table class="table table-user-information center" style="width:50%; margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td> I D </td>
<td> kaross11</td>
</tr>
<tr>
<td> 이 름 </td>
<td> 최정우 </td>
</tr>
<tr>
<td> 생 일 </td>
<td> 1988.01.24 </td>
</tr>
<tr>
<td> 성 별 </td>
<td> 남 </td>
<tr>
<td> Email </td>
<td> rightx2@gmail.com </td>
</tbody>
</table>
<div class="button-holder" style="text-align:center;display:block; width:20%;">
<a href="#" class="btn btn-primary"> 비밀번호 변경 </a>
<a href="#" class="btn btn-primary"> 회원탈퇴 </a>
</div>
</div> <!-- row -->


But it doesn't work.. It looks like this :

enter image description here

I succeeded only one
a
tag, but locating two tags is kinda different.
Need your advices.

Answer

You are using Bootstrap.

Add text-center along with your "button-holder" class

<div class="button-holder text-center">
    <a href="#" class="btn btn-primary"> 비밀번호 변경 </a>
    <a href="#" class="btn btn-primary"> 회원탈퇴 </a>
</div>

And you dont even need to add inline css to make it center horizontally: So you can remove style="text-align:center;display:block; width:100%;"

Working example here: https://jsfiddle.net/07j6t0yf/