두 이미지 사이의 텍스트

질문은 꽤 자명하다. CSS로 두 이미지 사이에 텍스트를 넣는 방법을 알고 싶다. 나는 position: absolute;을 시도했지만 중심에 있지는 않습니다. vertical-align: middle;을 시도했지만 아무 것도하지 않았습니다. This은 웹 사이트입니다. 여러분이 도와 드릴 수 있기를 바랍니다. 당신이 질문을 이해하지 않으면두 이미지 사이의 텍스트

는, 기본적으로 내가 무엇을 요구하고있어이 작업을 수행하는 방법이다 :
------- 웹 페이지 -------
[IMAGE] [TEXT] [IMAGE]
웹 페이지 -------

EDIT : 사람들이 내 웹 사이트 링크를 보지 못했거나 소스를 볼 수없는 것 같습니다.

<html> 
<head> 
    <title> 
     Epileptic Development 
    </title> 
    <link rel='stylesheet' type='text/css' href='style.css' /> 
</head> 
<body> 
    <div id='wrap'> 
    <center> 
     <div id="test"> 
      <img id='margin' src='ewd2.png' /><br /> 
      <img id='whale2' src='ewd.png' /><br /> 
      <div id="epileptic"> 
       <h1 id="header"> 
        Epileptic<br /> Development 
       </h1> 
      </div> 
      <div id='p'> 
       <p> 
        Welcome to the official Epileptic Development website! <br />We'll be posting our news, games and projects here!     
       </p> 
       <p id='subreddit'> 
        <a href='http://www.reddit.com/r/sonl'>Our official sub reddit</a><br /> 
       </p> 
       <p id='iTwitter'> 
        <a href='http://www.twitter.com/doorshaveknobs'>iPoisonxL's Twitter</a><br /> 
       </p> 
       <p id='MTwitter'> 
        <a href='http://www.twitter.com/swagmaster63487'>MaXXik's Twitter</a><br /> 
       </p> 
       <a href='/files/babyheadsmasher.zip'><img id='bhs' src='screen.png' title='Download BABY HEAD SMASHER!!' width='231' height='227' /></a> 
       <a href='/files/sonl.zip'><img id='sonl' src='sonl.png' title='Download SoNL!!' width='231' height='227' /></a><br /> 
      </div> 
     </div> 
    </center> 
    </div> 
</body>

을 여기에 이미지/텍스트의 CSS 코드입니다 : 다음은 HTML의 코드는

#p { 
font-family: inc; 
font-size: 18; 
border: 5px solid black; 
border-top: 3px solid black; 
border-radius: 15px; 
-moz-border-radius: 15px; 
margin-top: 0px; 
background-color: orange; 
margin-bottom: 0px; 
padding: 10px; 
padding-bottom: 284px; 
} 
img#margin { 
    float: left; 
    margin-left: 40px; 
    margin-top: 20px; 
} 
img#whale2 { 
    float: right; 
    margin-right: 40px; 
} 
#bhs { 
    float: left; 
    border-radius: 15px; 
    border: 5px solid black; 
    margin-left: 15px; 
    filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
} 
#bhs:hover { 
    filter: grayscale(0%); 
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
} 
#sonl { 
    float: right; 
    border-radius: 15px; 
    border: 5px solid black; 
    margin-right: 15px; 
    filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
} 
#sonl:hover { 
    filter: grayscale(0%); 
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
} 
#subreddit { 
}

참고 : 나는 단지 관련 CSS를 넣어.

출처

2013-03-06 hexagonest

float : left; ?? 위치 제거 : 절대; 먼저. –

안녕하세요, 나머지 컨텍스트가 있습니까? HTML 코드? jsFiddle? –

google '3 열 레이아웃 CSS'https://www.google.ca/search?q=3+column+layout+css&sourceid=ie7&rls=com.microsoft:en-us:IE-SearchBox&ie=&oe=&rlz=&redir_esc= & ei = 2UM3Ua35KeqGyAH02ICABw – dnagirl

<div class="maindiv"> 
    <div class="element">IMAGE</div> 
    <div class="element">TEXT</div> 
    <div class="element">IMAGE</div> 
</div> 

//CSS Code 
.maindiv{width:600px;} 
.element{width:200px; float:left;}

출처

2013-04-09 15:50:47 tonystarck

귀하의 요구 사항을 오해하지 않는 한, 귀하가 너무 열심히 노력하고 있다고 생각합니다. 이 작품 :

HTML

<img id="img1" src="http://dummyimage.com/100X100/000/fff" /> 
<div id="div1">This is text</div> 
<img id="img2" src="http://dummyimage.com/100X100/000/fff" />

CSS

#div1 { 
    display:inline; 
}

결과 :

enter image description here

여기 a working fiddle입니다.

출처

2013-03-06 13:25:47

글쎄, 나는 단지 텍스트를 넣을 수 없다. 그것들은 링크와 다른 것들이다. 텍스트가 아닙니다. 그것을 미리 미안하게 생각해서 죄송합니다. 지금 제 질문을 수정하겠습니다. – hexagonest

@DoorKnob, 여전히 간단합니다. 코드와 바이올린을 업데이트했습니다. 인라인 div에 텍스트를 넣기 만하면됩니다. –

작동하지 않아 div 컨테이너를 만들어 "인라인"으로 만들었습니다. 말 그대로 아무것도하지 않았다. – hexagonest

-1

DIV 내에 3 개의 요소를 모두 배치하고 각 div를 부동시킵니다. 문제를 정렬해야합니다.

출처

2013-03-06 13:26:36 micp

나는 이미 두 이미지를 왼쪽과 오른쪽으로 띄웠다. 텍스트는 단지 이미지 사이를 오가는 것처럼 보이지 않을 것이다. 어떻게 내가 센터에 그것을 띄울 수 있을까? – hexagonest

내가 말했듯이. div에 3 개의 요소를 모두 놓습니다. 상자 나 그 밖의 항목을 왼쪽으로 두십시오. {플로트 : 왼쪽;}

image

text

image

.box – micp

이 시도 :

HTML :

<div> 
    <img src="http://placehold.it/32x32" alt=""/>Test of text<img src="http://placehold.it/32x32" alt=""/> 
</div>

CSS :

div {text-align:center} 
div img {margin:0 5px;vertical-align:middle}

예 fiddle here

출처

2013-03-06 13:28:05

것은이고, 난 그냥 텍스트보다 더 있습니다. 나는 링크와 물건을 가지고있다 .. – hexagonest

:: 당신이 질문을 이해하지 못한다면, 기본적으로 내가 어떻게하는지 묻는 것은 이것을하는 방법이다 : ------- 웹 페이지 ------- [IMAGE] [TEXT] [IMAGE] ------- 웹 페이지 ------- 나 몰랐어? –

코드 아래 시도하고 CSS로 인라인 CSS를 변환하십시오.

<div> 
    <div style="width:200px; float:left;">IMAGE</div> 
    <div style="width:200px; float:left;">TEXT</div> 
    <div style="width:200px; float:left;">IMAGE</div> 
</div>

당신은 이미지에 float:left 및 float:right를 설정하여 쉽게 수행 및 컨테이너의 같은 마지막 자식의 텍스트를 넣을 수 있습니다

출처

2013-03-06 13:28:53

<div class="container"> 
    <img class="floatleft" src="http://www.epilepticdev.tk/screen.png" /> 
    <img class="floatright" src="http://www.epilepticdev.tk/sonl.png" /> 
    <div class="txt"> 
     <p>your text</p> 
    </div> 
</div> 

.container { 
    overflow: hidden; 
} 
.floatleft { 
    float: left; 
} 
.floatright { 
    float: right; 
}

물론

http://jsfiddle.net/6KwEZ/

출처

2013-03-06 13:29:07 stecb

나는 이것으로 jsbin을 만들었고, 그것은 아주 지저분한 일로 끝난다. – hexagonest

http://jsbin.com/afofuq/1/edit는 jsbin입니다. – hexagonest

이 또 다른 예입니다. http://jsfiddle.net/6KwEZ/ – Mustafa

, 나는 단지 가장 쉬운 방법이라고 생각했습니다. 마진이 있습니다. 내가해야만하는 것은 텍스트와 정렬되도록 margin-top을 낮추는 것입니다. 도움을 주신 모든 분들께 감사드립니다.

출처

2013-03-06 14:22:21 hexagonest

차가워졌습니다. 귀하의 솔루션을 작성하고 질문에 동참 할 수 있습니까? –

음, 물론 그렇 겠지. – hexagonest

두 이미지 사이의 텍스트

답변

관련 문제