Центрировать изображение между кнопками - PullRequest
Новая
       8

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

0 голосов
/ 08 января 2012

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

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

Ответы [ 2 ]

1 голос
/ 08 января 2012

Используйте стол! Ха! Я знаю. Нам не «разрешено». У меня нет Tumblr. Но я могу ответить на это вообще для любого 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.

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

Удачи!

0 голосов
/ 08 января 2012

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

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