如何在 td 中居中链接

Question

我对 td 中的中心链接有疑问。问题是我不知道这个 td 中有多少链接。有些只有 1 个，但也可以有 14 个。它们是水平放置的（但是当太多时，它们会转到下一行 - 它们有我添加的 float:left ）。我无法让他们居中。右边总是有空间，特别是当一个链接的宽度太宽并且要到另一行时。我也尝试过为我的班级做 .hour {display: inline-block } 但是在小尺寸上，所有链接都在一行中，看起来很糟糕。有可能这样做吗？我不知道或者你理解我：D

  <div class="container">

    <div class="row">
        <div class="box">
            <div class="col-lg-12">
                <hr>
                <h2 class="intro-text text-center">{{$doctorsDeadlines['lekarz']['imie']}} {{$doctorsDeadlines['lekarz']['nazwisko']}}
                </h2>
                <hr>
                <hr class="visible-xs">
                <h4 class="text-center">Terminarz</h4>
                <br/>
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                    <tr>
                        @foreach($doctorsDeadlines['terminy'] as $date => $hours)
                            <th class="text-center">{{$date}}</th>
                        @endforeach
                    </tr>

                    <tr>
                        @foreach($doctorsDeadlines['terminy'] as $date => $hours)
                        <td class="hour-container">
                            <div class="hour-div">
                            @foreach($hours as $hour )
                                <a class="hour" href="#">{{$hour}}</a>
                            @endforeach
                            </div>

                        </td>
                        @endforeach
                    </tr>
                </table>
            </div>
        </div>
    </div>
  </div>
</div>

CSS代码：

.hour {
color: white !important;
background-color: #6699CC;!important;
display: block;
padding: 5px;
float: left;
text-align: center;
margin: 3px;
font-size: 15px;
}

.hour:hover {
color: #000 !important;
background-color: #dee1ed;!important;
text-decoration: none;
}

.hour-div {
border: 1px solid black;
background-color: yellow;
display: inline-block;
}

Answer 1

试试看，否则评论；

替换

               <table class="table table-striped table-bordered">
                <tr>
                    @foreach($doctorsDeadlines['terminy'] as $date => $hours)
                        <th class="text-center">{{$date}}</th>
                    @endforeach
                </tr>

                <tr>
                    @foreach($doctorsDeadlines['terminy'] as $date => $hours)
                    <td class="hour-container">
                        <div class="hour-div">
                        @foreach($hours as $hour )
                            <a class="hour" href="../panel/wizyty/dodaj?id_lekarza={{$doctorsDeadlines['lekarz']['id']}}&data={{$date}}&godzina={{$hour}}">{{$hour}}</a>
                        @endforeach
                        </div>

                    </td>
                    @endforeach
                </tr>
            </table>

有了这个

<table class="table table-striped table-bordered">
                    <tr>
                        @foreach($doctorsDeadlines['terminy'] as $date => $hours)
                            <th class="text-center">{{$date}}</th>
                        @endforeach
                    </tr>

                    <tr>
                        @foreach($doctorsDeadlines['terminy'] as $date => $hours)
                        @foreach($hours as $hour )
                        <td class="hour-container">
                            <div class="hour-div">

                                <a class="hour" href="../panel/wizyty/dodaj?id_lekarza={{$doctorsDeadlines['lekarz']['id']}}&data={{$date}}&godzina={{$hour}}">{{$hour}}</a>

                            </div>

                        </td>
                        @endforeach
                        @endforeach
                    </tr>
                </table>