تراز کردن متن و تصویر در یک خط

وبمستر

توسط hasti در 4 سال پیش
0 1.1k 5 4 سال پیش
hastirockstar
0

درود بر شما من یه کدی نوشتم که مربوط میشه به قسمت headerسایت.حالا میخوام که سمت راست صفحه لوگوم باشه و سمت چپ شماره تلفن و ایگون تلفن ولی تراز کردنش رو نمیدونم میشه کمکم کنید

body
{
	margin:0; 
	padding:0; 
	/*direction:rtl*/
	font-family:Tahoma;
}

#main
{
	width:1000px;
	height:600px;/*removed*/
	background-color:#fff;
	margin:0 auto;
	
	
}
#header
{
	width:1000px;
	height:109px; 
	float:left;
	margin-top:15px;
}

#bg-header-left
{
	width:11px;
	height:109px;
	
	background-image:url(../images/bg-header-left.png);
	background-repeat:no-repeat;
	float:left;
	
} 

#bg-header-center
{  

	width:978px;
	height:109px;
	
	float:left;
	background-image:url(../images/bg-header-center.png); 
	background-repeat:repeat-x;
}

#bg-header-right
{ 

	width:11px;
	height:109px;
	
	background-image:url(../images/bg-header-right.png);
	background-repeat:no-repeat;
	float:left;
	

}

#logo
{
	width:218px;
	height:32px;
	
	float:left; 
	margin-left:58px;
	margin-top:30px;
	
} 


#logo_right
{
	width:220px;
	height:23px;
	float:right; 
	margin-left:58px;
	margin-top:30px; 
	text-align:right;
	
}
	
	<!--Main Start-->
	<div id="main"> 
    
    	<!--Header Start-->
    	<div id="header">
        	<div id="bg-header-left"></div>
            <div id="bg-header-center">
            
            
            	<div id="logo_left"> 
                	
                    <a href="#">
                
                	<img src="images/logo.png" alt="" />
                    
                   </a>
                    
                </div>
                
                <div id="logo_right">
                
                	<p align="left"><img src="images/icon_phone.png" align="icon_phone" /><img src="images/phone.png" align="phone" /></p>
                
                </div>
            
            </div>
            <div id="bg-header-right"></div>
        
        </div>
        <!--Header End-->
    
    
    
    
    </div>
    <!--Main End-->
0

کد رو نگاهی کردم شما برای جابجایی div ها از margin-top و... استفاده کرده در اینطور حالت ها وقتی میخوای به راحتی یه div یا هرچی رو جابجا کنید بجای استفاده از margin ابتدا position: relative; تعیین کنید و با استفاده از دستور top و bottom بخش مورد نظر رو جابجا کنید. :32:مثال:

#id {
float: left;
position: relative;
top: 10px;
}

حتی میتونید از مقادیر منفی استفاده کنید:

#id {
float: left;
position: relative;
top: -10px;
}
0

شرمنده من متوجه عرض شما نشدم من میخوام یه چیزی مثل این درست کنم

0

یخورده بهش نزدیک شدم ولی همچنان بر از مشکله

body
{
	margin:0; 
	padding:0; 
	/*direction:rtl*/
	font-family:Tahoma;
}

#main
{
	width:1000px;
	height:600px;/*removed*/
	background-color:#FFF;
	margin:0 auto;
	
	
}
#header
{
	width:1000px;
	height:109px; 
	float:left;
	margin-top:15px;
}

#bg-header-left
{
	width:11px;
	height:109px;
	
	background-image:url(../images/bg-header-left.png);
	background-repeat:no-repeat;
	float:left;
	
} 

#bg-header-center
{  

	width:978px;
	height:109px;
	
	float:left;
	background-image:url(../images/bg-header-center.png); 
	background-repeat:repeat-x;
}

#bg-header-right
{ 

	width:11px;
	height:109px;
	
	background-image:url(../images/bg-header-right.png);
	background-repeat:no-repeat;
	float:left;
	

}

#logo_left
{
	width:218px;
	height:32px;
	float:left; 
	margin-left:58px;
	margin-top:30px;
	
}

.img1
{ 
	float: right;
	position: relative;
	top: -10px;

} 

.img2
{ 
	float:right;
	position: relative;
	top: -10px;

}
	<!--Main Start-->
	<div id="main"> 
    
    	<!--Header Start-->
    	<div id="header">
        	<div id="bg-header-left"></div>
            <div id="bg-header-center">
            
            
            	<div id="logo_left"> 
                	
                    <a href="#">
                
                	<img src="http://www.softafzar.net/images/logo.png" alt=""/>
                  
                    
                   </a>
                   </div>
                    <img src="http://www.softafzar.net/images/icon_phone.png" alt="icon" class="img1"/>
                     <img src="http://www.softafzar.net/images/phone.png" alt="phone" id="img2" />
                    
                </div>
                
            
            </div>
            <div id="bg-header-right"></div>
        
        </div>
        <!--Header End-->
    
    
    
    
    </div>
    <!--Main End-->
آخرین ویرایش: 08-09-2014 ساعت 22:36، توسط Reza
0

> ![](E:/pickweb/handman) شرمنده من متوجه عرض شما نشدم من میخوام یه چیزی مثل این درست کنم
اینجا که چیزی نیست! منم حرف پیچیده ای نزدم: شما میخوای لوگو سمت راست باشه از float: right استفاده میکنی و میخوای شماره تلفن سمت چپ باشه از float: left استفاده میکنی. حالا میخوای این دوتا از بالای صفحه یک فاصله داشته باشن یا به قول خودتون ترازشون کنید برای این کار اول position: relative رو برای هر دو در css تعریف کنید سپس میتونید با استفاده از دستور های top و bottom در css هرکدوم رو به هر اندازه که لازمه از بالای صفحه فاصله بدین! اشتباه شما اینه که از margin برای فاصله دادن عناصر و تراز کردنشون استفاده می کنید
0

دوست عزیز ممنون مشکلم با راهنمائی شما کاملا برطرف شد

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید