Inspect your elements in your browser's developer tools. At least in Firefox, it will tell you when styles are not applied, and explain why.
In this case:
- The
w3-half
and w3-third
classes float
the elements they're applied to. - As a result, the
display:table-cell
style is not applied to the element. - This means that the
vertical-align:middle
style has no effect.
Demo[
^]
Removing
w3-half
and
w3-third
fixes the vertical alignment, but leaves each cell taking up half of the available space.
Demo[
^]
From what I can see, W3.CSS doesn't provide the classes you need to achieve the layout you want. You'd probably do better rolling your own, using Flexbox:
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[
^]
A Complete Guide to Flexbox | CSS-Tricks[
^]
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.col-4 {
width: 33.3333%;
}
.col-6 {
width: 50%;
}
<div class="d-flex align-items-center">
<div class="col-4">
<img src="..." width="350" style="max-width:100%;">
</div>
<div class="col-6">
<input type="search" width="100%" class="w3-col">
</div>
</div>
Demo[
^]