[SOLUCIONADO] Texto que no se centra alrededor de una imagen

uSources · #1 (**permalink**) 31/01/2013, 13:36

Hola a todos!
Soy nuevo en este foro, y novato en el lenguaje CSS
Despues de estrujarme durante 30 minutos el cerebro he preferido pedir ayuda.
Mi intencion es poner una imagen de 45 x 45 píxeles, y de seguido un texto pero que este este centrado (en la mitad de la imagen)
Así me gustaria que quedara

Pero así me queda:

He probado con padding y margin, pero nada
Código CSS:

Código:

body
{
background-color:#EBEBEB;
}
#top-bar
{
background-color:#82C06B;
border:1px solid #72B15B;
border-bottom:1px solid #72B15B;
height:45px;
position:relative;
border-radius:4px 4px 0px 0px;
max-height:45px;

}
h1.title-bar
{
font-size:18px;
color:#fff;
padding-left:25px;
}
#in-center
{
background-color:#F5F5F5;
margin:100px auto auto auto;
width:980;
height:100%;
border:1px solid #DCDCDC;
border-bottom:2px solid #DCDCDC;
border-radius:0px 0px 5px 5px;
}
#noticia
{
width:100%;
min-height:50px;
color:black;
border-bottom:2px dashed #EAEAEA;

}
#noticia:hover
{
-moz-transition:1s all;
-webkit-transition:1s all;
-o-transition:1s all;
background:#154aa1;
color:white;
border-bottom:2px dashed #123F87;
}
#contenido
{
display:none;
}
#readmore
{
float:right;
margin:13px auto auto 0;
padding-right:4px;
font-weight:bold;
font-size:16px;
}
#readmore:hover
{
-o-transition:1s all;
-webkit-transition:1s all;
-moz-transition:1s all;
color:black;
}
img.frame
{
font-size: 16px;
font-weight:bold;
float:left;
width:45px;
height:45px;
}
#frametext
{
font-size: 16px;
font-weight:bold;
verti

Y HTML

Código:

<html>
<head>
<!--Incluimos los META-->
	<meta name="Keywords" content="FPgames, FingerPrintGames,FPG,FingerPrint Games, Finger Print Games">
	
	<meta name="Description" content="Noticias, Curiosidades, Juegos.Todo en la nueva página de FPgames.!Flaming Logic!" >

	<meta name="Robots" content="all" >

	<meta http-equiv="Pragma" content="no-cache" >

	<link rel="stylesheet" type="text/css" href="style.css"> 
	
	<title>FPGames !Flaming Logic!</title>
</head>
<body>
<div id="in-center">
<div id="top-bar"><h1 class="title-bar">Noticias</h1></div>
<div id="Noticia"><div id="readmore">Read more</div><img class="frame" src="http://nosoloiphone.files.wordpress.com/2009/01/2255692755_d69ac763d2.jpg"/><div id="frametext"> el texto a mostrar </div><div id="contenido"></div></div>
</div>
</body>
</html>

Gracias por la ayuda!

ipraetoriux · #2 (**permalink**) 31/01/2013, 14:17

prueba agregando esto....

Código CSS:

Ver original#frametext{
  position:relative;
  float:left;
  margin-top:10px;
}
 
img.frame
{
position:relative;
font-size: 16px;
font-weight:bold;
float:left;
width:45px;
height:45px;
}

debes agregar un position relative tanto a la imagen como al texto...mira como me queda http://jsbin.com/asotut/1/edit

uSources · #3 (**permalink**) 31/01/2013, 14:22

Cita:

Iniciado por ipraetoriux

prueba agregando esto....

Código CSS:

Ver original#frametext{
  position:relative;
  float:left;
  margin-top:10px;
}
 
img.frame
{
position:relative;
font-size: 16px;
font-weight:bold;
float:left;
width:45px;
height:45px;
}

debes agregar un position relative tanto a la imagen como al texto...mira como me queda [url]http://jsbin.com/asotut/1/edit[/url]

Muchisimas Gracias!