Html 将配置文件图片和标题与css对齐相结合

我正在尝试将个人资料图片与我电脑上的文字（标题）结合起来

我对对齐有问题。我还需要它在响应视图中表现良好。（如果标题变大，则应归入-）

css

#header .user-portrait {
border-radius: 100%;
width: 40px;
height: 40px;
margin-right: 18px;
display: inline-block;
vertical-align: middle;
float: left;
}

#header a {
font-weight: bold;
display: block;
margin-bottom: 34px;
vertical-align: top;
}

#description {
color: {color:Description};
padding-right: {text:Minus width for header in px}px;
}

#page-masthead ul { 
margin: 0;
list-style-type: none;
display: block;
clear: both;
line-height: 1.92em;
padding-right: {text:Minus width for header in px}px;
}   

html:

<div id="page-masthead">
<div id="header">

<a href="/"><img src="{PortraitURL-40}" alt="" class="user-portrait"></a>

{block:IfShowblogtitle}
<a href="/">{Title}</a>
{/block:IfShowblogtitle}
</div>

{block:IfShowblogtitle}
{/block:IfShowblogtitle}

当宽度足够小时，最好使用媒体查询，如下所示

@media only screen and (max-width: ??px) {

    #header .user-portrait {
        float: none;
        margin: 0 auto /* To center the "span" or whatever you're using */
    }

}

---

你能为你的媒体查询发布代码吗？所以这里不是为你编写代码的地方。@MikeDidt很抱歉让我的qs不清楚。我制作的图片显示了我想要的正常对齐方式，以及标题是否需要对齐。现在，如果需要对齐，文本和图像将变为不同的行。文本/标题应该看起来更清晰在《阿凡达》的中间有一个gned。再次，请显示完整的代码。目前这个问题对CSS的理解程度很低。@Mikeddt这是我添加的html代码，我已经把它放在哪里了。我没有更多的代码，当涉及到这个个人资料图片和周围环境时。你想让它有响应，但没有媒体查询？请尝试。这就是为什么“响应性”是指，如果你的网站是完全“响应性”的，那么它应该在“各种规模”下工作