CSS中將字和圖排列在同一行有很多實現方法，其中一種方法是使用display:inline-block屬性。

.container{
width: 500px;
height: 50px;
}
.text{
display: inline-block;
width: 200px;
height: 50px;
font-size: 18px;
line-height: 50px;
}
.image{
display: inline-block;
width: 150px;
height: 50px;
background: url(image.jpg) no-repeat;
background-size: contain;
}

在上述代碼中，我們首先建立了一個父級容器.container，設置了容器的寬度和高度。我們將文本容器.text和圖片容器.image都設置為display:inline-block，這樣它們就會排列在同一行。

對于文本容器，我們設置了width和height屬性，讓其具有一定的寬度和高度，并設置了文字大小和行高，讓文字居中顯示。

對于圖片容器，我們設置了其width和height屬性，并將其背景設置為圖像，在這里我們使用了背景圖片background和背景圖片大小background-size屬性，讓圖像在容器內等比例縮放填充，同時保證圖片容器也具有一定的寬度和高度。

使用display:inline-block屬性可以讓我們方便地在CSS中排列文字和圖片等行內元素，同時定制元素的大小和樣式，實現更加靈活的布局。