Текст не остается в div, который находится внутри другого div?

Question

простой код, я пробовал различные способы, но я не могу изменить положение текста внутри div, который находится внутри другого div !?

Html:

<div class="left_container"> 

<?php 
$i=1; 
while($i<=6) 
{ 
echo "<br><div class='data_block'><img src='g.jpg' class='data_image'/><span class='.data_title'>TOPIC TITLE HERE</span></div>";  
$i++; 
} 
?> 

</div> 

CSS:

.left_container 
{ 
    background-color:; 
    margin-left:5%; 
    margin-top:5%; 
    width:70%; 
    height:1000px; 
    overflow:scroll; 
} 

.data_block 
{ 
    background-color: white; 
    width:95%; 
    height:20%; 
    border:solid 1px #006666; 
    margin-left:auto; 
    margin-right:auto; 
} 

.data_title 
{ 
    font-size:18px; 
    font-family:Nevis; 
    margin-left:500px; 
} 

Я хочу, чтобы переместить "Название темы ЗДЕСЬ", установите левое поле, держать его в центре. Но на этом ничего не работает! Текст находится только в нижней части div !? Зачем?

EDITED: ошибка была class = ". Data_title", которую я исправил, но проблема все же есть! Текст отображается за пределами div сейчас!

Answer 1

Определение класса с . (точка) не является правильным, оно должно быть class='data_title'.

изменение

class='.data_title' 

в

class='data_title' 

Вы должны также добавить float: left в свой CSS.

Answer 2

Изменить этот

class='.data_title' 

в

class='data_title' and 

<div class="aleft_container"> 

</div> 

Вы должны изменить свой CSS и то есть, изменить имя класса.

.aleft_container 
{ 
    background-color:some-color; 
    margin-left:5%; 
    margin-top:5%; 
    width:70%; 
    height:1000px; 
    overflow:scroll; 
} 

.data_block 
{ 
    background-color: white; 
    width:95%; 
    height:20%; 
    border:solid 1px #006666; 
    margin-left:auto; 
    margin-right:auto; 
} 

.data_title 
{ 
    font-size:18px; 
    font-family:Nevis; 
    margin-left:500px; 
} 

Answer 3

Изменить имя класса class=".datablock" в class="datablock".

А затем добавьте свой код позиционирования.

EDIT

Добавить float: left; или display: block; для стилей класса.