5
이미지 옆에 작은 텍스트가 가운데에 오게하는 데 문제가 있습니다."float : right"및 vertical center에 CSS 가져 오기
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<img src="logocss.gif" width="95" height="84" />
<div style="position:relative; top: 20px;">
This
</div>
<div>
Other stuff...
</body>
</html>
(당신은 또한 엉망을 복사 행동에 그것을보고 http://www.w3schools.com/CSS/tryit.asp?filename=trycss_float에이 코드를 붙여 넣습니다.
는 내가하고 싶은 것은이 이미지 옆에 떠있는 동안 수직으로 텍스트를 중심으로하는 방법입니다. 수 당신이 볼 수 있듯이, "Other Stuff ..."가 "This"위에 있습니다.)
순수한 CSS 접근 방식을 선호합니다 (또는 아마도 divs 등의 구조 조정을 선호합니다). 문제를 보여주는 예입니다. 사용되는 응용 프로그램은 매우 복잡하며 모든 것을 테이블로 옮기는 데는 상당한 작업이 필요하고 po 엄밀히 말하면 좋지 않을 것입니다.
UPDATE
좋아, 나는 내가 데 문제를 보여줍니다 내 asp.net 생성 된 페이지의 일부를 찢어있다. 코드가 추악하고 사과한다는 것을 알고 있습니다. 기계에 의해 생성되었습니다
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<table>
<tr>
<td>
<div style="line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
<span>This </span>
</div>
</td>
</tr>
</table>
Other stuff...
<br>
<br>
Actual application:
<br>
<div style="width:300px;">
<div style="width:300px;">
<input type="hidden"/>
<table border="0" style="border-collapse:collapse;border-spacing:1px;">
<tr>
<td style="width:250px;"><div style="line-height: 50px;">
<input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" /><span style="display:inline-block;color:Black;width:250px;">Email</span>
</div></td><td style="width:350px;"><table border="0">
<tr>
<td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td>
</tr><tr style="height:0px;">
<td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
죄송하지만 큰 문제는 내 문제의 작동 예제입니다. 나는 라인 높이 트릭을했는데 여기에는 효과가없는 것 같다. 기본적으로 편집 컨트롤을 이미지 중앙 (테이블 때문에 쉽다) 중앙에 배치하고 "이메일"텍스트를 이미지 중간에 세로 가운데에 배치 할 수 있습니다. 나는이 합의에서 그렇게 할 수는 없다. 내가 도대체 뭘 잘못하고있는 겁니까?
글쎄, 그들이 어디로 갔는지 잘 모르겠습니다. 그러나 누군가 내가 꼭 필요한 '패딩 - 탑 (padding-top)'에 관한 글을 올렸습니다. 텍스트 정렬 센터를 제외하고는 저를 도왔 기 때문에 그 포스트의 삭제를 취소 할 수 있습니다. 사실 나는 그것을 대답으로 여길 것이다. – Earlz