W3.CSS framework use only to create elements in middle in one line

Question

0.00/5 (No votes)

See more:

I have a problem, i want to use w3.css framework to create layout. I know how to create elements on one line and textbox put in middle, but when i want to create size of text box all brokens. Anyone mybe know how to create code to be like in my photo by using only w3.css code ? Look at my code examples and photos please ?

This code creates in middle elements and one line :

HTML

<pre>

<div class="w3-cell">      
  <img src="logo1.png" width="350px">
</div>

<div class="w3-cell w3-cell-middle">      
  <input type="search" width="100%">
</div>

And this how it looks: https://failiem.lv/u/ngcch2qdz#/view/nn6wxkctk

This code is how to change size of text box:

HTML

<pre><div class="w3-row">
    <div class="w3-third">      
        <img src="logo1.png" width="350px">
      </div>   
   
    <div class="w3-half">      
        <input type="search" width="100%" class="w3-col">
      </div>
    </div>

Idont know is it correct our there are better changes to change size but its looks like this: https://failiem.lv/u/ebe2hh2yf#/view/nkcdtmee8

Quastion is how to use w3 and create like this in photo variant: https://failiem.lv/u/grv3b8ex4#/view/kfhnqggvj

To bee size changed and textbox in middle, because when i try put all together that textbox goes another row or all brokens... please help if someone knows what i mean ?

What I have tried:

I was try to put all together but textbox stays always in top and this is big problem that if put code together it stays up not in middle and w3-cell-middle not working :(

HTML

<pre><div class="w3-row">
    <div class="w3-third w3-cell">      
        <img src="logo1.png" width="350px">
      </div>   
   
    <div class="w3-half w3-cell w3-cell-middle">      
        <input type="search" width="100%" class="w3-col">
      </div>
    </div>

Posted 27-May-21 20:14pm

User 14717878

Updated 27-May-21 21:19pm

v2

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-05-27T21:19:00

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[^]

CSS

.d-flex {
    display: flex;
}
.align-items-center {
    align-items: center;
}
.col-4 {
    width: 33.3333%;
}
.col-6 {
    width: 50%;
}

HTML

<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[^]

W3.CSS framework use only to create elements in middle in one line

1 solution

Solution 1

Add your solution here

Preview 0

W3.CSS framework use only to create elements in middle in one line

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us