Горизонтальное положение с изображением в центре

Я искал целую кучу, но не смогли найти ничего, что шел рядом с ним ..Горизонтальное положение с изображением в центре

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

Это образ, который я хочу использовать: http://www.dylanvanheugten.nl/images/logo.png

Спасибо заранее!

источник

2013-08-09 Swobbleton

Я думаю, что вы просите больше о фотошопе, чем css ... если я не ошибаюсь, вы просите что-то вроде (_________ pic _________) .. затем создайте изображение с помощью фотошопа, а затем включите его с помощью '' на внизу вашего div –

@RitabrataGautam Не совсем честно. Я хочу, чтобы изображение «внутри» было горизонтальным. – Swobbleton

Это может заставить вас начать:

HTML:

<div class="line"> 
    <span class="logo"></span> 
</div>

CSS:

.logo { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -25px; 
    margin-top: -25px; 
    padding: 0 5px; 
    height: 50px; 
    width: 50px; 
    background: #fff url(http://www.dylanvanheugten.nl/images/logo.png) no-repeat 50% 50%; 
} 

.line { 
    position: relative; 
    overflow: visible; 
    height: 1px; 
    background-color: #ddd; 
    border: 1px solid #ddd; 
}

Вот скрипка, в которую вы можете играть: http://jsfiddle.net/4tZLD/1/

источник

2013-08-09 08:14:20 fiskeben

Есть ли способ, которым вы знаете, чтобы сделать линию «dissappear», где находится изображение? Я сделал это, установив фоновый цвет, но у меня нет сплошного цвета в качестве фона. http://www.dylanvanheugten.nl – Swobbleton

Да, добавьте цвет в правило фона и, возможно, правое и левое paddings, чтобы остановить линию немного перед логотипом. Я обновил этот пример. – fiskeben

Вы можете обратиться к этой статье. Может быть, вы можете найти решение, которое охватывает все браузеры (или по крайней мере те, что вы заботитесь о):

http://www.sovavsiti.cz/css/hr.html

источник

2013-08-09 08:10:06 melancia

На самом деле этого я не хотел. Спасибо, в любом случае. – Swobbleton

Я думаю, что вы хотите что-то подобное, если я правильно понял.

http://jsfiddle.net/9yjmU/

HTML:

<div class="image"> 
    <img src="http://www.dylanvanheugten.nl/images/logo.png"/> 
</div> 
<div class="line"> 
</div>

CSS:

.image{ 
    text-align: center; 
} 

.line{ 
    border-top: 1px solid black; 
    margin-top: -20px; 
}

Вы можете видеть, что я использовал DIV с border-top и margin-top: -20px; так это в центре изображения (который выглядит 40px; высота).

источник

2013-08-09 08:14:36

HTML:

<div class="line"> 
    <img src="http://www.dylanvanheugten.nl/images/logo.png" class="lineImg"> 
</div>

CSS:

.line { 
    border-bottom: 1px solid black; 
    text-align:center; 
    height:17px; 
    margin-bottom:17px; 
} 

.lineImg { 
    background-color:white; 
    padding:0px 5px 0px 5px; 
}

см: http://jsfiddle.net/V5wj6/3/

высота и маржа-дно .line должны быть exaclty половину высоты IMG, таким образом, изображение будет вертикально центрировано по линии, и следующее содержимое не будет находиться под границей.

в .lineImg стиле цвет фона делает его выглядеть лучше, удалив строку под IMG, а обивка придает ему больше места, вам придется настроить цвет фона на страницу

источник

2013-08-09 08:20:25 x4rf41

Ваше изображение над линией. Вы забыли css в jsfiddle. –

@ KeesSonnema правильный код, но я забыл обновить jsfiddle: D, теперь его исправлено – x4rf41

Спасибо большое! Проблема только в том, что я не использую сплошной цвет в качестве фонового изображения. – Swobbleton

Этих , мы надеемся, наконец, обеспечит простое решение бесконечного квеста, чтобы центрировать горизонтально расположенную графическую и автоматическую локализацию при изменении размера. Метод calc() поддерживается большинством браузеров. В приведенном ниже синтаксисе используется графическое изображение с шириной 728 пикселей.

Полная ширина = 728px, получить 50% = 364px.Затем примените следующие:

#imagecentre1 { 
left : calc(100%/2 - 364px); 
/*rest of syntax */ 
}

Важно обеспечить «белого пространства» обе стороны от «+» и «-» это, чтобы гарантировать, что ценности, положительные и отрицательные правильно работать и ради непрерывности практика должна применяться к «/» и «*». Я уверен, что кто-то подтвердит порядок исполнения, из памяти он будет +, -, x, /. Calc() имеет базовые функции, нет «авто»!
Ожидайте некоторые ограничения. Просто дай ему вихрь!

источник

2014-08-26 22:28:53 hograham

Горизонтальное положение с изображением в центре

ответ

Смежные вопросы