Question

我正在尝试将一行按钮放在html div中。

<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>

所以我想将所有这些按钮集中在menuBarLine div中。查看我正在处理的网站：http://www.blakearchive.org/blake/public/exhibits/canterbury.html

我想将按钮置于右列顶部的中心位置。我在div中尝试了margin：0 auto，但是没有用。

感谢。

Answer 1

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

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

display:none; position:relative; float:right

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

html div中的按钮中心行

1 个答案: