Html 我正在尝试制作一个有响应性的矩形，里面左边是图像，文本居中

我正试图用twitter bird

float

ed左移，使其旁边的文本居中，从而发出一条响应性的tweet

按钮

我的代码是：


.flex矩形{
浮动：左；
利润率：0.5px；
最大宽度：500px；
文本对齐：居中；
宽度：200%；
背景：#FFFFFF；
边框：7px实心#00A5EF；
}
/*风格推特鸟png*/
.图像包装器{
垫面：10%；
位置：相对位置；
宽度：100%；
垫底：10%；
}
img.tweet{
浮动：左；
}
/*推特：*/
.span内容{
显示：块；
颜色：#00A5EF；
}
.span{
显示：块；
文本对齐：居中；
字体系列：OpenSAN；
字体大小：36px；
颜色：#00A5EF；
}

推特
CSS
您必须将bird和文本放在一个
div
中，并为图像元素编码，您必须在图像元素所在的一个代码中首先调用第一个父div和其他div
.flex rectangle.image wrapper img
来编辑图像的代码。此外，您还必须在
图像包装器中插入
Tweet This
的html代码，以使图像向左移动，文本居中

CSS代码：

.flex-rectangle {
       float: left;
       margin: 0 5px;
       max-width: 500px;
       text-align:center;
       width: 200%;
       background: #FFFFFF;
       border: 7px solid #00A5EF;
    }

/* Styles Twitter Bird png */

.image-wrapper {
                 padding-top: 10%;
                position: relative;
                margin: auto;
                max-width: 125;
                max-height: 50px;
                width: 100%;
                padding-bottom: 15%;
}


.flex-rectangle .image-wrapper img {
                float: left;
                max-width: 50px;
                max-height: 50px;
                width: 100%;

            }
/* Tweet This: */
.span-content {
                display: block;
                text-align: center;
                color: #00A5EF;
            }


            .span {
                display: block;
                text-align: center;
                font-family: OpenSans;
                font-size: 36px;
                color: #00A5EF;
            }

HTML代码：

<div class="flex-rectangle">
    <div class="image-wrapper">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
        <div id="buttons">
            <div class="span-content">
                <span>Tweet This</span>
            </div>
        </div>
    </div>

</div>


推特
您可以使用伪元素
：before
和
：：after

多谢各位。这在很大程度上起作用。但是我没法得到答案
推特鸟向左浮动，文本在旁边。任何
建议

我使用了
flexbox
文本将在桌面视图的twitter按钮旁边，在移动视图的下方


@导入url(https://fonts.googleapis.com/css?family=Open+无|满足|）；
/*整个页面的样式*/
img{
最大宽度：100%；
边框：7px实心#00a5ef；
}
#换页{
显示器：flex；
柔性包装：包装；
调整内容：中心
}
h1{
字体大小：粗体；
文本转换：大写；
字体大小：30px；
边缘顶部：50px；
宽度：300px；
线高：1；
字体系列：“开放式Sans”，无衬线；
颜色：#1485C7；
文本对齐：居中；
字母间距：0；
}
/*关于：*/
h1.中心{
文本转换：大写；
字体大小：正常；
字体系列：“满足”；
垂直对齐：文本底部；
线高：10px；
颜色：#1485C7；
}
h1.更大{
字体大小：46px；
颜色：#1485C7；
显示：块
}
/*矩形1：*/
.柔性矩形{
背景：#fff无重复滚动0；
弹性：1 15%；
利润率：0.15%；
最大宽度：300px；
填充：10px；
位置：相对位置；
引号：“\201C”“\201D”；
文本对齐：居中；
排名：0；
}
.flex矩形：：之前{
颜色：#00a5ef；
内容：公开报价；
字体系列：格鲁吉亚；
字体大小：25vw；
左：-15vw；
位置：绝对位置；
最高：50%；
}
.flex矩形：：之后{
颜色：#00a5ef；
内容：关闭报价；
字体系列：格鲁吉亚；
字体大小：25vw；
位置：绝对位置；
右图：-15vw；
最高：50%；
}
.文本{
自对准：柔性端
}
.span内容{
显示：内联块；
颜色：#00A5EF；
保证金：0自动；
填充物：5px；
边框：3px实心#00A5EF；
}

随机报价单设计
推特
随机引用
谢谢。这在很大程度上起作用。然而，我不能让推特鸟向左浮动，而让文本在旁边。有什么建议吗？@twhite96查看更新的答案，文本将在桌面视图的twitter按钮旁边，在移动视图的下方。这几乎可以正常工作。但是它仍然没有按照我想要的方式工作。我有一个模型。也许这会帮助你，帮助我。您可以找到它的直接链接，因此文本位于顶部，您还有一个代码中没有的引用。