Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   display:inline-block по центру горизонтали (https://javascript.ru/forum/xhtml-html-css/35548-display-inline-block-po-centru-gorizontali.html)

Слейп 14.02.2013 13:08
display:inline-block по центру горизонтали
 
есть 4 блока

<div class="work-box-news">
    <div class="work-box_center-news">
        <div class="left-area-work"></div>
        <div class="include-work_area"></div>
    </div>
</div>




.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;    
    border:3px solid gold;
}

.work-box_center-news {    
    width: 940px;    
    min-height:800px;    
    padding:20px 0;     
    position:relative;     
    display:inline-block; 
    vertical-align:auto;    
    border:3px solid black;  
}


.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;
    min-height: 723px;    
    float:left;    
    border:3px solid green;
}

.include-work_area{    
    position: relative;        
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    left:25px;      
    float:left;   
    border:3px solid red;
}


Как выровнять work-box_center-news по центру по горизонтали, при том чтобы высота всех блоков была динамичной?

Слейп 14.02.2013 13:17
для ie8

danik.js 14.02.2013 13:19
text-align: center для родительского блока:

<!DOCTYPE html>
<title></title>
<style>
html{width:1200px;}
.work-box-news {   
    background:#F0F0F0;   
    min-height:800px;   
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;   
    border:3px solid gold;
    text-align: center;
}
 
.work-box_center-news {   
    width: 940px;   
    min-height:800px;   
    padding:20px 0;    
    position:relative;    
    display:inline-block;
    vertical-align:auto;   
    border:3px solid black; 
}
 
 
.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;   
    width: 240px;
    min-height: 723px;   
    float:left;   
    border:3px solid green;
}
 
.include-work_area{   
    position: relative;       
    width: 650px;   
    min-height: 500px;
    font-family: PT Sans;
    left:25px;     
    float:left;  
    border:3px solid red;
}

</style>
<div class="work-box-news">
    <div class="work-box_center-news">
        <div class="left-area-work"></div>
        <div class="include-work_area"></div>
    </div>
</div>

Слейп 14.02.2013 13:36
спасибо большое, теперь он действительно по центру, чтобы все содержимое дочерних блоков было по левому краю немного подредактировал.

.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;    
    border:3px solid gold;
    position:relative;  
    
    text-align: center;  
}

.work-box_center-news {    
    width: 940px;    
    min-height:800px;    
    padding:20px 0;     
    position:relative;      
    display:inline-block;        
    border:3px solid black; 
    text-align: left; 
}


.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;
    min-height: 723px;    
    float:left;    
    border:3px solid green;
    position:relative;

    text-align: left; 
}

.include-work_area{    
    position: relative;        
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    left:25px;      
    float:left;   
    border:3px solid red;

    text-align: left; 
}


НО, left-area-work (зеленый), в ie8, при увеличении высоты уходит за work-box_center-news(черный). Всю голову изломал уже...

Слейп 14.02.2013 13:40
извиняюсь, я нашел проблему но её не решил, если ручками поменять в css высоту зеленого блока то все нормально. У меня зеленый блок увеличивает высоту jQuery скриптом - Там выподающее вертикальное меню, во всех браузерах кроме ie8 нормально увеличивается высота... в чем может быть проблема ?

danik.js 14.02.2013 13:48
Цитата:
Сообщение от Слейп
в чем может быть проблема
Может быть в том что вы используете javascript там, где нужно использовать css?

Чем height: auto (это дефолтное значение кстати) не устраивает?

Слейп 14.02.2013 14:12
Все, сделал так:

<div class="work-box-news">
	    <div class="work-box_center-news">
	        <div class="left-area-work"></div>
	        <div class="include-work_area"></div>
                   <div style="clear: both;"></div>   <!-- ДОБАВИЛ ЭТУ СТРОКУ --!>
	    </div>     
</div>


И все стало отлично работать, спасибо большое что обратили внимание!

danik.js 14.02.2013 14:17
<div style="clear: both;"></div> - прошлый век.
Достаточно родителю задать
display: table;
zoom: 1;

Хотя table не всегда можно применить. А зачем вобще задавать блоку display: inline-block ?

display: block;
heigth: 800px;
margin: 0 auto;


это также отцентрирует блок по горизонтали.

Слейп 15.02.2013 09:57
Готовый вариант
 
Готовый вариант:

<div class="work-box-news">
	        <div class="work-box_center-news">
	            <div class="left-area-work"></div>
	            <div class="include-work_area"></div>
                       <div style="clear: both;"></div>
	        </div>
</div>



.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;       
    text-align: center;  
}

.work-box_center-news {   
    margin: 0 auto;
    min-height: 800px;
    padding: 20px 0;
    position: relative;
    text-align: left;
    width: 940px; 
}


.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;    
    min-height: 723px;    
    float:left; 
    position:relative;
    text-align: left; 
}

.include-work_area{    
    position: relative;        
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    left:25px;      
    float:left;       
    text-align: left; 
}

ksa 15.02.2013 10:20
Цитата:
Сообщение от Слейп
Готовый вариант:
Можно еще "облегчить"... :)

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;       
}
.work-box_center-news {   
    margin: 0 auto;
    min-height: 800px;
    padding: 20px 0;
    width: 940px; 
	overflow: hidden;
}
.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;    
    min-height: 723px;    
    float:left; 
}
.include-work_area{    
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    margin-left:25px;      
    float:left;       
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="work-box-news">
	<div class="work-box_center-news">
		<div class="left-area-work">left-area-work</div>
		<div class="include-work_area">include-work_area</div>
	</div>
</div>
</body>
</html>


Часовой пояс GMT +3, время: 10:20.