I’m working on a University Project

and I have a select tag

the problem is when the page is not in full Screen

the select position is perfect enter image description here

but when I’m full screen it doesn't appear like I want to enter image description here

Html Code
<div>

        <select class = "FeedBack2">
            <option value="Suggestion">Suggestion</option>
            <option value="Complaint">Complaint</option>
            <option value="Idea">Idea</option>
            <option value="Help">Help</option>
          </select>
    
    </div>

and here is The CSS Code

.FeedBack2 { background-color: #da9b48; color: rgb(31, 22, 5); width: 50%; margin-left:150px; margin-top:10px; margin-bottom:20px;}

CodePudding user response：

Try this one:

.FeedBack2 { 
display: flex;
background-color: #da9b48; 
color: rgb(31, 22, 5); 
width: 50%;
margin: 0 auto;
}

<div>

        <select class = "FeedBack2">
            <option value="Suggestion">Suggestion</option>
            <option value="Complaint">Complaint</option>
            <option value="Idea">Idea</option>
            <option value="Help">Help</option>
          </select>
    
    </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try following code to add the following to place select center horizontally and vertically. remove margin in.FeedBack2 class

div {
    display: flex;
justify-content: center;
align-item: center;
 }