Div不清除或居中

Question

我有这个页面：food menu

我已经用以下css明确了菜标题：

@media (max-width: 768px) {
.dish: {text-align:center;}
.dishTitle {
    clear: right;
    display: block;
}
.dish img {clear: left;}

}

由于某种原因，它没有清除。如果您检查dishTitle div它会显示，如果我删除了display属性，它会清除。如何将图像和价格集中在dishNumber和dishTitle divs下方的单独一行？此外，我将整个菜肴包装在.dish div中，并将其设置为text-align：center;但没有什么是中心的。我希望它在移动设备上看起来正确，现在它只是将所有东西捆绑在一起。如果它有帮助，这是我的所有CSS：

.dish {
text-align: left;
}
.dishNumber {
font-size: 18px;
display: inline;
line-height: 24px;
vertical-align: middle;
color: #FF6600;
margin-right: 2px;
}
.dishTitle {
font-size: 18px;
display: inline;
line-height: 24px;
vertical-align: middle;
color: #000066;
margin-bottom: 4px;
}
.dishPhoto {
padding-right: 8px;
padding-left: 8px;
display: inline;    
}
.dishPrice {
font-size: 18px;
clear: right;
display: inline;
float: right;
line-height: 32px;
vertical-align: middle;
color: #000066;
}
.dishDescription {
font-size: 14px;
margin-bottom: 6px;
font-style: italic;
padding-right: 44px;
}
.dish img {
max-height: 22px;
}

感谢您的帮助。