Центральное изображение между кнопками

Я пытаюсь настроить свой блог на Tumblr, но у меня возникают проблемы. Я хочу, чтобы в моем блоге была картинка, расположенная горизонтально по центру, с кнопками «Далее» и «Назад» вокруг нее. Это должно выглядеть так

O [__] O

где O — мои кнопки, а [_] — моя картинка. Как мне собрать три элемента вместе, чтобы они были по центру моей страницы, а кнопки — на расстоянии определенного количества пикселей от изображения? Обе кнопки имеют свой собственный DIV, у фотографии есть класс, и есть один DIV, охватывающий три из них.

Мой HTML такой:

 <div class="photo-wrap">
<div id="previous">
<img src="http://static.tumblr.com/gptupvc/hUhlxhrgd/next.png"></img>
</div>
                {block:Posts}


                {block:Photo}
<center>
<a href="{Permalink}"><img class="photo" src="{PhotoURL-HighRes}"></img></a></center>
{/block:Photo}
{/block:Posts}
</div>
<div id="next">
<img src="http://static.tumblr.com/gptupvc/hUhlxhrgd/next.png"></img>

</div>

со следующим CSS

.photo-wrap {
        position:relative;
        margin-top:50px;
        width:1200px;
        margin-left:auto;
        margin-right:auto;
        background-color:red;

    }

    .photo {
        float:left;
        height:600px;
        border-radius:10px;
        }

    #next {
        float:right;
        margin-top:-350px;
        background-color:green;

        }

    #next img {
        width:100px;
        height:100px;
    }

    #previous {
        float:left;
        margin-top:250px;
        background-color:red;

        }

    #previous img {
        width:100px;
        height:100px;
    }

html css tumblr
person Wouter van Dijke    schedule 08.01.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Используйте стол! Ха! Я знаю. Нам "не разрешено". У меня нет тамблера. Но я могу ответить на это вообще для любого HTML.

Поместите свои три виджета в div и настройте стиль с помощью style="text-align:center". Теперь все, что вы поместите внутрь этого div, будет центрировано.

<div style="text-align:center">Stuff</div>

Затем поместите каждый из виджетов в свои собственные div и стилизуйте их так, чтобы они выглядели «встроенными».

<div style="text-align:center">
   <div style="display:inline">Previous</div>
   <div style="display:inline">Button</div>
   <div style="display:inline">Next</div>
</div>

Наконец, вам нужен интервал — так что возитесь с полями и отступами, пока не получите то, что хотите. Например, попробуйте это:

<div style="text-align:center">
   <div style="display:inline">Previous</div>
   <div style="display:inline;margin-left:25px;">Button</div>
   <div style="display:inline;margin-left:25px;">Next</div>
</div>

И вы, вероятно, захотите в конечном итоге поместить все эти стили в CSS. Но делайте это в последнюю очередь.

Кстати, еще один способ добиться горизонтального интервала — использовать «margin: 0 auto» для содержащего div.

Вертикальное центрирование - это совсем другое, но вы не спрашивали об этом.

Удачи!

person 010110110101    schedule 08.01.2012

arrow_upward
0
arrow_downward

Я бы посоветовал вам попробовать этот код

 <style type="text/css">
 #image{float:left;}/*this is the important part to set float*/
 #male{float:left;}
 </style>

 <form>
 <input id="male" type="radio" name="sex" value="male" > Male
 <div id ="image"><img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304"      height="228" /></div>
 <input type="radio" name="sex" value="female" /> Female
 </form
person Community    schedule 08.01.2012