Jump to content
  • 0

Центральное позиционирование резинового блока?


gnomikprazdnik
 Share

Question

Добрый день! Есть блок с ссылками, количество ссылок всегда разное, он резиновый, как ему задать центральное позиционирование?

Спасибо!

<div id="post"><div id="tags"><a href="#">Winter</a><a href="#">Cold</a></div></div>
Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

Сейчас у меня вот такой код:

<style>#post {width: 500px;}#one {display:block;}#tags {background: #f30;margin: 0 auto;}#tags a{color: #777;padding-right: 5px; padding-left: 5px;}<div id="post"><img><caption><div id="one"><div id="tags"><a>Tags</a><a>Tags</a><a>Tags</a><a>Tags</a></div><div id="date">18/12/2156</div></div></div>

Если блоку #tags сейчас добавить textalign center, то ссылки будут по центру, однако это не то, что я хотел, простите, возможно я не точно выразил свою мысль.

Мне нужно чтобы ссылки равнялись по правому краю когда произойдет перенос строки. Я не силен в кодах и по этому не понимаю почему margin: 0 auto; не работает.

К томуже это тема для tumblr так что, как мне показалось способ примененный в ссылке, что скинул "iKNG"(Спасибо!) не подойдет т.к. я немогу вносить изменения в код ссылок, они будут выглядеть как просто ссылки, без класса, и тем более я несмогу в каждую добавить <span>.

Link to comment
Share on other sites

  • 0

Видимо когда копировл, случайно удалил одну строку... В любом случае простите. Скриншот:

bc6167c8254c01e8769b3b6e3f91a3ed.jpg

Задача сделать, чтобы теги были по центру, но когда строка заполнена переносились на следующую справа а не по центру, именно по этому я не могу использовать text-align:center;

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By мурамаса
      Добрый день, при вертске столкнулся с такой проблемой, на первом скриншоте я старался с позиционировать элементы, что бы текст шел как бы лесенкой а между ними фото.
      http://joxi.ru/D2Pz9gOTp65Z7r
      Но после того как я добавляю вторую картинку элемент с текстом почему то присасывается к верхней части, хотя до этого я задал ему clear: left; что бы он расположился под первой картинкой.
      После добавления картинки, получается вот так http://joxi.ru/nAyvGpPtYbzRdr
      Помогите решить проблему, правильно ли вообще я позиционирую элементы на странице? или же можно решить туже задачу проще?
      Html этой секции
      <div class="box"> <div class="company"> <p>Наша компания на протяжении многих лет занимается производством крема из экологически чистых материалов. Мы предосталвяем широкий ассортимент кремов для разных целей. Именно нас на протяжении многих лет выбирают покупатели, потому что хотят получать результат, а не просто выкидывать деньги на ветер.</p> </div> <div class="company"> <p>В наших кремах испольщуются только природные и экогологически чистые материалы, включая фрукты вроде кокоса или сладких личи. Использование подобных материалов помогает поддерживать кожу в здоровом виде и не допускать ее высыхания, в том числе это благоприятно сказывается на лечении разных кожаных болезней и дерматологии.</p> </div> <img src="/images/crem.png" alt="Крем фото" class="photo"> <div class="company"> Эмульсионные кремы бывают двух типов – масло-вода и вода-масло. В первом случае эмульсия имеет жидкую консистенцию и используется для изготовления дневных увлажняющих кремов. Благодаря высокому содержанию воды (до 70 процентов) они восполняют потерю влаги, легко наносятся, быстро впитываются, не оставляя жирного блеска на коже. </div> <img src="/images/crem1.png" alt="эмульсия" class="photo"> </div> </section> css этой секции
      .company { width: 450px; text-align: justify; float: left; font-size: 20px; } .company:nth-child(2) { width: 450px; text-align: justify; float: right; margin-top: 250px; } .company:last-child { float:left; width: 450px; clear: left; } .photo { float: left; width: 400px; height: 400px; } .photo:last-child { float: right; }  
    • By Super_Saimon
      Добрый день! Подскажите каким способом правильней будет отцентрировать изображение(лого сайта) в header - e. Более конкретнее меня интересуют: центрировать сам блок-родитель с изображением, или само изображение? И если само изображение - пользоваться свойствами position и margin? Flex не предлагать. Хочу без него разобраться. В нем все просто на этот счет.
    • By ErUnDAK
      <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How you use your text?</title> <style> a { text-decoration: none; } .lol { background: green; width: 50%; height: 145px; text-align: center; } .lol p { color: #109be6; margin: 0; padding: 0; text-align: center; font-size: 50px; border-top: 10px solid #78d3fa; border-bottom: 10px solid #78d3fa; text-shadow: 0 2px 4px #a0a0a0; } .menu ul { list-style: none; float: right; font-size: 0; padding-right: 12px; } .menu ul li { display: inline-block; font-size: 25px; } .menu ul li a { height: 100%; display: block; padding: 19px; background: #5faaea; color: #fff; box-shadow: inset -0px -12px 30px -10px black; border-left: 1px solid white; } .menu ul li a:hover { box-shadow: inset -0 1px 10px 0 black; } </style> </head> <body> <center> <div class="lol"> <p>How you use your text?</p> <div class="menu"> <ul> <li><a href="">Главная</a></li> <li><a href="">Купля/продажа</a></li> <li><a href="">Аренда</a></li> <li><a href="">Оставить заявку</a></li> <li><a href="">КОНТАКТЫ</a></li> </ul> </div> </div> </center> </body> </html> Здравствуйте! У меня возникла проблема, что при уменьшении окна браузера всё смещается и становится кривым. Как отменить это смещение, чтобы всё оставалось как при полном экране?
    • By Voilin
      Здравствуйте! Имеется картинка для заднего фона и ещё 2 файла, которые надо разместить поверх самого фона
      Хотелось бы узнать как можно разместить ipad и iphone на фоне, уменьшить их размер (сами они очень большиеа) и сделать растягивающийся фон

      Могу также оставить ссылку на psd если надо.
      Заранее благодарю
    • By Dillett
      Здравствуйте, прошу помощи как начинающий и неопытный верстальщик.
      Проблема заключается в том, что я не могу спозиционировать элементы, как того требует дизайн макета. 
      Подскажите как можно добиться необходимого результата, как на изображении.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy