html分区中按钮的中心行

Center row of buttons in html div

本文关键字：按钮 分区 html      更新时间：2023-09-26

我正试图将一行按钮放在html分区的中心。

<div id="menuBarLine" style="position:relative; float:left; width:24%; background-color: black">
        <div id="toggleFullscreen" style="color:red; visibility:visible; position:relative; float:right" ;>
            <button title="Fullscreen" onClick="fullscreen();">Fullscreen</button>
        </div>
        <div id="toggleMap" style="display:none; position:relative; float:right" ;>
            <button title="Show/Hide Map" onClick="toggleMap();">Image Map</button>
        </div>
        <div id="toggleCarousel" style="color:red; visibility:visible; position:relative; float:right" ;>
            <button title="Show/Hide Thumbnails" onClick="toggle_carousel();">Thumbnails</button>
        </div>
<div id="toggleBib" style="color:red; visibility:visible; position:relative; float:right" ;>
            <button title="Show/Hide Bibliography" onClick="toggleBib();">Bibliography</button>
        </div>
        <div id="showGalleryMenuButton" style="display: block; position:relative; float:right" ;>
            <button id="showGalleryMenuButtonButton" title="Show/Hide Gallery Menu" onClick="toggle_visibility('menu');">Galleries</button>
        </div>
        </div>

因此，我想将所有这些按钮集中在菜单BarLine分区中。请参阅我正在开发的网站以获得视觉效果：http://www.blakearchive.org/blake/public/exhibits/canterbury.html

我想把按钮居中放在右栏的顶部。我在div中尝试了margin:0auto，但没有成功。

谢谢。

1-将text-align:center设置为menuBarLine。

2-从所有按钮中删除此属性

display:none; position:relative; float:right

3-并为每个按钮添加display:inline-block。

相关文章：