0

I'm working on trying to create a website, and I want an image to appear to the right side of the title I have picked, but I cant find any way to align them that properly works.

.title {
  background-color: white;
  color: black;
  width: 680px;
}

.logo {
  width: 100px;
  height: 100px;
}
<div class="title">
  <h1>
    <font size="+10" /><u/>Computer Science A-Level Notes</h1>
  <img class="logo" src="breh.png">
</div>

can anyone tell me what I can do?

THess
  • 1,003
  • 1
  • 13
  • 21
Isaac Naylor
  • 15
  • 5

5 Answers5

2

There are a lot of ways to align two elements horizontally. The two modern way to achieve this is to rely on flexbox or css grid.

Here is a basic usage of flexbox:

.title {
  background-color: white;
  color: black;
  width: 680px;
}

.logo {
  width: 100px;
  height: 100px;
}

div {
  display: flex;
  flex-direction: row;

}
<div class="title">
  <h1>Computer Science A-Level Notes</h1>
  <img class="logo" src="https://via.placeholder.com/100x100">
</div>

Related to Flexbox: center horizontally and vertically

aloisdg
  • 22,270
  • 6
  • 85
  • 105
1

Try this:

.title{
    background-color: white;
    color: black;
    width: 680px;
    display: inline-flex;
}

.logo{
    width: 100px;
    height: 100px;
    float: right;
}
<div class="title">
  <h1>Computer Science A-Level Notes</h1>
  <img class="logo"src="images/1.jpeg">
 </div>
Pushprajsinh Chudasama
  • 7,772
  • 4
  • 20
  • 43
0

Here is how you can do it with flexbox.

.title {
  display: flex;
  align-items: center;
}
<div class="title">
    <h1>Computer Science A-Level Notes</h1>
    <img class="logo"src="https://picsum.photos/200/200">
</div>
Muhammad
  • 6,725
  • 5
  • 47
  • 54
0

You need to make both things inside the .title class have a inline-block alignment, and for the best look you should set the vertical-align property on both. 

.title {
  background-color: white;
  color: black;
  width: 680px;
}

.title h1 {
  display: inline-block;
  vertical-align: middle;
}

.title .logo {
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: middle;
}
<div class="title">
  <h1>Computer Science A-Level Notes</h1>
  <img class="logo" src="https://placehold.it/100x100">
</div>
Jhecht
  • 4,407
  • 1
  • 26
  • 44
  • Nowadays we should use flexbox in most cases. It is quite obsolete to use `display: inline-box` fot this case. For a solution with flexbox, check https://stackoverflow.com/a/59354350/1248177 – aloisdg Dec 16 '19 at 10:14
  • I know how to use flexbox. Flexbox is not always needed, and without knowing much else about the OPs particular use case, there's no point in making him look up something that might confuse them. – Jhecht Dec 16 '19 at 10:18
0

You can also do it without using flexbox by simply applying this css

.title{
    background-color: white;
    color: black;
    width: 680px;
}
.title *
{
float:left;
}
.logo{
    width: 100px;
    height: 100px;
}
Khurram Ansari
  • 55
  • 4
  • Avoid using `float: left` without a proper `clear` after. Also you are breaking the css flow. Float is a solution used eons ago. Time to let it die. You should use flexbox instead. It is not difficult to use. Check https://stackoverflow.com/a/59354350/1248177 – aloisdg Dec 16 '19 at 10:15
  • `@aloisdg says Reinstate Monica `, `float:left;` is here to stay. There are all sorts of situations for using it. Still won't work though, without the `.title` Element `width` to facilitate both Elements. That font was huge. – StackSlave Dec 16 '19 at 10:22
  • @StackSlave most of the time float is use to layout a block. Nowadays, most of the time you have a better way to achieve the expected result. Thank you flexbox and grid. – aloisdg Dec 16 '19 at 14:20
  • Sometimes you want something on one side or the other, even within a flex. – StackSlave Dec 17 '19 at 02:06