无法通过html和css将图像与链接和文本对齐

无法通过html和css将图像与链接和文本对齐,html,css,Html,Css,在本例中,我希望图像位于左侧,然后作者姓名在图像旁边居中,然后在我试图居中按钮的下方。我把图片和按钮放在中间,但当我加上作者的名字时,一切都消失了 还有,我该如何把所有的东西都缩小一点。我尝试过调整高度和宽度,但是作者的图片最终出现在该部分之外 .authorbio{ 背景色:#000; 边界半径:10px; 边框:4个点#870505; 线高:50px; 宽度:55%; 身高:55%; 利润率:0.10px 10px; } .authorbio>h1{ 垂直对齐:右对齐; 文本对齐:居中;

在本例中,我希望图像位于左侧,然后作者姓名在图像旁边居中,然后在我试图居中按钮的下方。我把图片和按钮放在中间,但当我加上作者的名字时,一切都消失了

还有,我该如何把所有的东西都缩小一点。我尝试过调整高度和宽度,但是作者的图片最终出现在该部分之外

.authorbio{
背景色:#000;
边界半径:10px;
边框:4个点#870505;
线高:50px;
宽度:55%;
身高:55%;
利润率:0.10px 10px;
}
.authorbio>h1{
垂直对齐:右对齐;
文本对齐:居中;
}
.authorbio>img{
边框:1px实心#870505;
边界半径:20px;
宽度:150px;
高度:150像素;
利润率:10px;
垂直对齐:中间对齐;
}
/*社会联系
--------------------------------------- */
a、 社交链接{
-webkit边界半径:5px 5px;
边框:实心1pxRGB(0,0,0);
背景:webkit梯度(线性,0%0%,0%100%,从(rgb(76,68,68))到(rgb(22,21,21));
颜色:#ccc;
文字装饰:无;
文本对齐:居中;
显示:内联块;
填充:2px2px;
字体大小:20px;
字体大小:粗体;
}
a、 社交链接:悬停{
-webkit边界半径:5px 5px;
边框:实心1pxRGB(0,0,0);
背景:webkit梯度(线性,0%0%,0%100%,从(rgb(224,0,0))到(rgb(61,2,2));
颜色:#ccc;
文字装饰:无;
文本对齐:居中;
显示:内联块;
填充:2px2px;
字体大小:20px;
字体大小:粗体;
}
a、 社交链接:访问{
-webkit边界半径:5px 5px;
边框:实心1pxRGB(0,0,0);
背景:webkit梯度(线性,0%0%,0%100%,从(rgb(96,96,96))到(rgb(2,2,2));
颜色:#000;
文字装饰:无;
文本对齐:居中;
显示:内联块;
填充:2px2px;
字体大小:20px;
字体大小:粗体;
}
a、 社交链接:活跃{
-webkit边界半径:5px 5px;
边框:实心1pxRGB(0,0,0);
背景:webkit梯度(线性,0%0%,0%100%,从(rgb(30,30,30))到(rgb(70,70,70));
颜色:#ccc;
文字装饰:无;
文本对齐:居中;
显示:内联块;
填充:2px2px;
字体大小:20px;
字体大小:粗体;
}


检查此是否正常工作

我刚刚制作了标题
内联块
,并使用有用的
calc
属性相应地调整了宽度

.authorbio>h1{
垂直对齐:右对齐;
文本对齐:居中;
显示:内联块;
宽度:计算(100%-175px);/*减去图像的宽度+一些额外的值*/

}
试试这个,你只需要替换图像和链接地址。我为你写了完整的代码。试试这个。如果不是这样,告诉我


悬停
身体{
保证金:0;
填充:0;
}
生物组{
宽度:500px;
高度:400px;
利润率:1%;
填充:10px;
背景色:黑色;
边框:3个点红色;
边界半径:5px;
}
分区自动图像{
宽度:150px;
高度:150像素;
边框:2倍纯红;
盒影:1px 2px 1px白色;
边界半径:5px;
}
自动影像调幅{
宽度:100%;
身高:100%;
}
分区authorlink{
宽度:100%;
文本对齐:居中;
}
作者链接a组{
字体大小:45px;
}
div.authorlink a:悬停{
文字装饰:无;
颜色:红色;
}
钮扣石{
宽度:100%;
}
div.buttonsetwo{
宽度:100%;
边缘顶部:50px;
}
按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮{
宽度:自动;
背景颜色:灰色;
文本对齐:居中;
浮动:左;
左缘:3%;
填充:1%;
边框:1px纯白;
边界半径:5px;
}
div.按钮斯通div:悬停{
背景色:红色;
}
分区按钮斯通分区a{
文字装饰:无;
颜色:白色;
字体大小:35px;
}
div.按钮设置两个div{
宽度:自动;
背景颜色:灰色;
文本对齐:居中;
浮动:左;
左缘:3%;
填充:1%;
边框:1px纯白;
边界半径:5px;
}
div.按钮设置两个div:悬停{
背景色:红色;
}
分区按钮设置两个分区a{
文字装饰:无;
颜色:白色;
字体大小:35px;
}