Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS text-align: center; Tag Isn't Working On an IOS Device

TokyoNerd

New Coder
Listed below is the code that I'm using to build a website. I've gotten this to display the way that I'd like it to on a computer (I'm currently using a Macbook), and when I scale it down and view it as it may look on a smartphone on my computer there are no issues. However, when I try to view one of the web pages on my iPhone 12 pro, the word "search" on the button on my search bar doesn't display propperly. I'd like the word "search" to be centered in the middle of the button, but no matter what I try the word "search" remains on the right side of the button slightly cut off. I've tried the tag "text-align: center;" and a few other solutions that I've found on the web, but none of them work. I've made the search bar using javascript.

Does anyone have any ideas of how I can get the word "search" to display in the middle of the search button?

HTML:
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<body style="background-color: white; font-family: sans-serif;">
<title>#</title>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;"><a href="#">Home</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">Blog</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">About Koizumi</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">Bibliography</a></li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="Search" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 46px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
if(!!window.performance && window.performance.navigation.type == 2)
{
window.location.reload();
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">Photos/Videos Taken:◯◯◯◯/◯◯/◯◯</p>
<br><p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br><div class="image">
<a href="#"><img src="#" alt="#" width="90%"></a>
<br><br><a href="#"><img src="#" alt="#" width="90%"></a>
<br><br><a href="#"><img src="#" alt="#" width="90%"></a>
<br><br><a href="#"><img src="#" alt="#" width="90%"></a>
<br><br><a href="#"><img src="#" alt="#" width="90%"></a>
<br><br><a href="#"><img src="#" alt="#" width="90%"></a>
<br><br><a href="#"><img src="#" alt="#" width="90%"></a>
<br><br><a href="#"><img src="#" alt="#" width="90%"></a>
<br><br><a href="#"><img src="#" alt="#" width="90%"></a>
<br><br><a href="#"><img src="#" alt="#" width="90%"></a>
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© | <a href="#">日本語</a></footer>
</div>
</div>
<style>
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
@media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
 
Last edited by a moderator:
Your search area is coded with errors.
You place '<div class="searchbar" ...' in a <ul> It should be(s/b) outside and seperate.
You make the form tag as self closing => '<form id="frmSearch ... />' FORM has an opening AND a closing tag!
By the way all your self closing tag have a space between / and > this is wrong.
I would rethink making a search bar a form.
Your '<input class="search2"...' has 'style="center: 396px; ...' No such thing as center:
In '<input class="search1" type="submit" ...' , your button, There is nothing centering the text.
Here 'text-align:center' should work.
I like this 'display: flex; align-items: center; justify-content: center;' for centering, it does the right and left plus the up and down. Good for buttons.

P.S. Stop putting JavaScript in the HTML code. Start using your CSS for the style and not doing it inline.
 
Your search area is coded with errors.
You place '<div class="searchbar" ...' in a <ul> It should be(s/b) outside and seperate.
You make the form tag as self closing => '<form id="frmSearch ... />' FORM has an opening AND a closing tag!
By the way all your self closing tag have a space between / and > this is wrong.
I would rethink making a search bar a form.
Your '<input class="search2"...' has 'style="center: 396px; ...' No such thing as center:
In '<input class="search1" type="submit" ...' , your button, There is nothing centering the text.
Here 'text-align:center' should work.
I like this 'display: flex; align-items: center; justify-content: center;' for centering, it does the right and left plus the up and down. Good for buttons.

P.S. Stop putting JavaScript in the HTML code. Start using your CSS for the style and not doing it inline.
Thanks for your reply. I'd really like to use this search bar if I could, and I tried the suggestions you gave me but when the text is centered (for whatever reason) the search button goes below the search bar, not staying to the right of it as I'd like it to. I'll look into other solutions, but will keep trying other methods to see if I can use this current search bar as well.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom